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Why does this book look so different? 

We think ynur time is too valuable to spend struggling with new 
concepts. Using the latest research in cognitive science and learn¬ 
ing theory to craft a niuiti-sensory learning experience, Head First 
Web Design uses a visually rich format designed for the way your 
brain works, not a text-heavv approach that puts you to sleep. 


“Simplified，but 
far from dumbed ， 
down. Practical 
and intuitive. I 
wish I had access 
to a book like this 
when I was getting 
started •” 

—— Mali DiGangi, 
Rrnt life weh designer 

u Finally a developer 
can fully under¬ 
stand the whole 
process of creating 
a GREAT website. 
Web Design 101, 
you finally got the 
"book you needed/ 
wanted/' 

—— fohmines de Jong, 
Web Pmgimnmer 


Web Design 


What will you learn from this book? 

Ever wished you could learn real web design from a book? Wondering 
how to make your pages look beautiful, communicate your message 
effectively, and get your site approved by the accessibility and usabil¬ 
ity police, all at the same time? 

Head First Weh Design is your ticket to mastering all of these topics. 
You’ll learn the secrets of designing incredible, user-friendly sites, 
from customer requirements to hand-drawn storyboards all the way 
to finished HTML and CSS online masterpieces … and your sites 
will actually work, too! 
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building beautiM Web pages 

Beauty is in the eye of your user 

It’s a great big (wide) world... but who’s really out there? 

So you’ve got your nice shiny XHTML and CSS diploma hanging on the wall, and 
the prospective clients are ringing your new business line off the hook. Cool, right? 
Yeah... until you get your first complaint about a bad layout, or a logo that’s just so 
1998. So how do you create really beautiful websites and still make sure they 
satisfy your users? It all begins with good planning. Then you’ve got to write for 
the Web, know your audience, and, above all else, make sure you’re designing 
for your users, not yourself. 



Your big chance with Red Lantern Design 
Where do you start? 

Draw up a blueprint first 
Determine your top level navigation 
Put it all in context 
Show Jane some basic design sketches 
Sketches keep the focus on functionality 
Don’t min a good design with bad copy 
What makes text scannable? 

Web design is all about communication, and your users 
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Your first international gig... 

Think before you code 

A clear visual metaphor helps reinforce your site’s theme 
A theme represents your site’s content 
Brainstorming: The path to a visual metaphor 
Develop a theme and visual metaphor for Mark 
Your page elements shape your visual metaphor 
Build a quick XHTML mock-up for Mark 
And the CSS... 

Use storyboards to develop ideas and save time without code 
Don’t design for yourself! 

Let’s create a storyboard for Mark 
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pre-product!9n 

Paper covers rock 

Tired of butting heads with a picky client? Yeah, you know the type... 
every time you show them their latest crazy design idea, they’ve already moved on to 
another look... another color scheme... another entire website. So how do you deal 
with fickle clients or those tricky hard-to-get-right websites? You start with paper, 
pencil, and a big fat pink eraser. In this chapter, you’ll learn how to work smart before 
you dig into your HTML editor. Conning up with a theme and visual metaphor for your 
site, mocking up sketches in pencil, and using storyboards will turn you into a nimble, 
flexible web designer. So get out your sketch pad, and let’s pre-produce! 
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orgcinizing your site 



“So you take a left at the green water tower—’’ 

A little shaky on your site navigation? 

When it comes to the Web, users are impatient. They don’t want to waste lots of 
time looking for the right button or wading through three levels of your JavaScript 
pull-down menus. That’s why you’ve got to spend a lot of time getting your site’s 
organization right... before you get into construction and design. Last chapter, you 
came up with a great theme and look for your site. In this chapter, you’ll really amp 


things up with a clear organization. By the time you’re done, you’ll have a site 
that tells your users where to go and keeps them from ever getting lost again. 
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RestayraMt Menus 


A collection of menus N 
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eateries around the con 


Fit your content into your layout 
Organize your site’s information 

Keep your site organized with information architecture (IA) 

IA—The card sorting way 

Card Sorts Exposed 

Sort your cards into related stacks 

Give your stacks names that are short and descriptive 

Which card sort is right? 

Arrange your cards into a site hierarchy 
IA diagrams are just card sorts on paper 
IA diagrams are NOT just links between pages 
Move from pre-production to production 
Build Mark’s site structure 
Create index.html first... 

...and then screen.css for style 

Pre-production to production: the complete process 
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layout and design 

Follow the Golden Rule 

It pays to be a good listener... and to carry a pocket 
calculator. 

We’ve been talking about user-centered design for a few chapters, but here’s where 
you really put your listening skills to the test. In this chapter, you’ll take your users’ 
feedback and build a site that meets their needs. From browsers to screen real 


estate, it’s all about giving your users what they really want. Not only that, you’ll learn 
the secrets of the rule of thirds. Find out how a few easy presses of the calculator, a 
ruler, and some gridlines can turn your blase web page into a thing of beauty. 



Name: Awm 
A ge: 1 % 

Internet Connectivity: PSL 

Avg. time onliwe/week for leisure: 15 hours 

browser of choice: Firefox 

Operating System: Windows XP 

Screen Resolution: 800x600 

Occupation: Student 

details: Ann considers herself very tech savvy. She 
actively participates in social networks and online 
communities. She also regularly shops online. Her 
laptop (which is a little old, but all she can really 
afford right now) is her primary computer-and 
where she does all of her web browsing. 



Design is about audience 

Your newest gig: RPM Records 

Pinpoint RPM’s audience with personas 

Let the personas be your guide... 

Resolution impacts design and layout 

Screen real estate determines how much of your site 
will display in your user’s browser 

Build an XHTML and CSS foundation optimized for 1024x768 

Humans like things lined up and well-organized 

How wide should my grid be? Use the Golden Ratio 

The rule of thirds: A shortcut to the Golden Ratio 

RPM and the Golden Ratio: An (anti) case study 

Remember your personas and client? 

Set up RPM 2.0 with the Blueprint Framework 

Use Blueprint CSS rules to style RPM 2.0 

Time to get your RPM groove on 

Add some CSS to clean up the layout 

Finish off the content and navigation markup 

Add layout and typographic details with some more CSS 
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designing With colot 
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oving Beyond Monochrome 

olor is the unsung hero of web design, a good color palette can 

draw your audience into your site, give them a powerful feeling of immersion, and keep 
em coming back for more. And when it comes to color and web design, it’s not just 


about picking a good color palette, it s also about how you apply those colors. You 
can have a great color palette, but if you don’t use those colors thoughtfully, people 
might avoid your site like the plague. By the end of this chapter, you’ll not only be 
intimately familiar with the impact that color has on the web user, but you’ll also be 
able to choose a great looking color palette that fits in — and even complements — your 


user-centered websites. 


Help support your local music scene 
9Rules: The blog network gold standard 
Sometimes your choices are a bit... limited 
Color has an emotional impact 
The color wheel (where it all begins) 

Use the color wheel to choose colors that “go together’’ 
First, choose your base color 

Use the triadic scheme to create usable color patterns 
Get started on the SampleRate markup 
Create the basic page layout with CSS 
The opposite of heavy is... light 

Create a richer color palette with the tetradic color scheme 
Let’s update the SampleRate CSS 
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smart navigation 



“In 2 seconds, click £ Home’.’’ 

What would the Web be without navigation? 

Navigation is what makes the Web such a powerful information medium. But here’s 
the thing: navigation is a lot more than just whipping up some cool-looking buttons and 
slapping them into your design. Building smart navigation starts with your information 
architecture and continues through your entire design process. But how does it work? 
How do you really make sure your users never get lost? In this chapter, we’ll look at 
different styles of navigation, how IA guides your page links, and why icons (alone) 
aren’t always iconic. 



School’s back in session 194 

The first step to good navigation is good IA 197 

What’s really in a name, anyway? 198 

Approach # 1 : Horizontally-tabbed navigation 204 

Approach #2: Vertical navigation 206 
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Let’s float the block navigation on the CNM site 213 

Icons don’t SAY anything... they just look pretty 215 

Add icons to your text, not the other way around 217 

Update the CNM XHTML to use textual links 218 

Now we can style our new block elements... 219 

Primary navigation shouldn’t change... 

but secondary navigation should 221 

Each sub-page gets its own secondary navigation 222 

Let’s style the navigation with our CSS 223 
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Writing for the Web 

Yes, you scan! 

Writing for the Web is just like any other kind of writing, 

right? Actually, writing for the Web is completely different than writing for print. 
People don’t read text on the Web like they read text on a printed page. Instead of 
reading text from left to right, beginning to end, they scan it. All of the text on your 
site needs to be quickly scannable and easily digestible by the user. If not, users 
won’t waste their time on your site, and they’ll go somewhere else. In this chapter, 
you’ll learn a bevy of tips and tricks for writing scannable text from scratch and 
making existing text easy to scan. 
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Website copy 


In 1973, Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don 
Kaye founded Tactical Studies Rules in order to publish the rules for Cavaliers and 
Roundheads, a miniature war game based in the English Civil War. While Cavaliers 
and Roundheads was the initial focus of Tactical Studies Rules, Gygax and Kaye 
also wished to publish the rules for Dungeons & Dragons, a fantasy miniature role 
playing game developed by Gygax whose rules were based on Chainmail, a medieval 
miniature game developed by Gygax and Jeff Perren in 1971. As Cavaliers and 
Roundheads began generating revenue for Tactical Studies Rules, the partnership 
was expanded to include Dave Arneson and Brian Blume. While Dave Arneson was 
brought into the partnership as a game designer, and left shortly thereafter, Brian 
Blume entered as a funder. Blume believed that Cavaliers and Roundheads was not 
generating enough revenue, and encouraged Gygax and Kaye to focus their efforts on 
releasing Dungeons & Dragons. 

There is considerable debate as to the contributions that Dave 
Arneson made to the initial development of Dungeons & Dragons. 

While Arneson has labeled himself “The Father of 


Build a better online newspaper 233 

Hipster Intelligencer Online: project specs 234 

The problem is TEXT 234 

Improve your content with the Inverted Pyramid 241 

Compress your copy 247 

Add lists to your XHTML 257 

Headings make your text even more scannable 259 

Mix fonts to emphasize headings and other text 268 

The level, not the size, of a heading conveys importance 269 
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Heading Level 5 

Heading Level 6 
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accesslbil!^ 

Inaccessibility Kills 

Who’s missing out on experiencing your website right now? 

You may have a beautiful, well-laid out, easily navigable site... but that doesn’t mean 
everyone’s enjoying it. Whether it’s someone who’s visually-impaired or just a user 
who has trouble distinguishing blues from greens, your site must be accessible. 
Otherwise, you’re losing users and hurting your business. But don’t worry: accessibility 
isn’t difficult! By planning the order of your markup, using ALT attributes and 
LONGDESC tags, and thinking about color, you’ll widen your audience immediately. 
Along the way, you may even get WCAG certified. What’s that? Turn the page, and 
find out... 



Audio-2-Go: inaccessible accessibility 

Accessibility means making your site work for everyone 

How does your site read? 

A site’s message should be clear...to everyone 

Face it: computers are stupid! 

A computer will read your image’s ALT text 

Convert your long ATT text to a LONGDESC 

Your improvements are making a difference 
for some Audio-2-Go customers 

Accessibility is not just about screen readers 

Tabbing through a page should be orderly 



Audio-2-Go is now a lot more accessible 
WCAG Priority 1 

Color shouldn’t be your only form of communication 
Life through web-safe eyes... 

Life through color-blind eyes... 

Audio-2-Go, via color-blind eyes 
Those stars are a real problem 
Background images are still your friend 
There’s more to ordering than just tabindexes 
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Web Prowscr Usage 

(For the entire Internet) 
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Problems over at RPM 320 

Let your audience speak to you through focus groups and surveys 322 
Surveys and focus groups aren’t free 325 

Surveys Exposed 327 

Ask the right questions in your surveys 328 

The final RPM Music user survey 338 

The results are in! 340 

Responses to the open-ended question: 341 

Web browser usage 343 

Fix RPM’s CSS bug by moving the hover property 344 

The building blocks of budget usability testing 351 

Use a moderator script to organize the test 352 

Friends and family can be a problem 359 

The results of the usability test—what the users are telling you 360 

A simple problem... 361 

Site stats give your users (another) voice 363 

Website analytics tools 364 



listen t9 yQUY users 

The Pathway to Harmonious Design 

Good design is all about really listening to your users. 

Your users can tell you whafs wrong with your site, \n hat’s right with your site, 
how you can fix things (if necessary) and how you can improve your site. There 
are lots of ways you can listen to your users. You can listen to them in groups 
(using tools like surveys), listen to them individually (with tools such as usability 
tests), and listen to their collective actions on your site (with tools such as site 
metrics and statistics). Whatever method you use, its all about “hearing” what your 
users are saying. If you do, your site will meet the needs of your audience and be 
that much better for it. 
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CONS 

Surveys 

Require a relatively short time commitment 
from survey participants 

一一一 

Can be administered to a huge amount 
of people 

Written surveys may present problems for 
lower level readers 

Can be administered in lots of ways (paper, 
online, by phone, in person) 

— 一 — d 

Participants can often complete the survey 
at their own leisure 


Focus Groups 

Allow participants to build on each 
other’s ideas 

Require larger time commitment from 
participants 

Collects information on a very specific 
topic from those who have a stake 
in the topic 

Usually require compensation for the 
_一 

Benefits from a trained facilitator 

Public environment may intimidate some 
participants 


Requires a trained facilitator 
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evolutionary design 

Keeping your site fresh 

So you’ve built a bunch of awesome websites. Now it s time to kick 

back, relax, and watch the visitor numbers grow, right? Whoa, not so fast. The Web 
never stops evolving — and your site needs to keep up. You can add new features, 
tweak the design, or even do a complete redesign. An ever-changing site reflects 
your growing skills —— which means your site is always your best PR tool. 



Flash 


jQuerv 


JQuery JavaScript 
library 



XHTML + CSS 


Your portfolio so far... 370 

Keeping your site and content fresh keeps your users coming back 372 
Web design is about evolution, not revolution 375 

Use CSS to evolve your site’s design 376 

Use JavaScript lightboxes to add interactivity to your site 388 

Add Facebox to the Red Lantern home page 389 

Edit your index file 390 

Adding blog functionality with WordPress 395 

Add a WordPress blog to the Red Lantern site 396 

Blog Exposed 398 

Change the look and feel of your blog with themes 400 
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the business 9^ Web design 

Mind Your Own Business 

Business in a web design book? Are you kidding me? 

You’ve mastered pre-production, information architecture, navigation, color, and 
even accessibility. What’s left in your path to web design mastery? Well, you’re 
going to have to tackle the business issues of web design. You don’t need 
a Harvard MBA, but you better know more than just where you deposit your 
check... or those checks may stop coming. Let’s look at establishing good client 
relationships and understanding your intellectual property rights. The result? 
Increased profits and protection for your hard work. 


The newest potential client: the Foo Bar 404 

What Foo Bar wants in a bid 405 

Let’s build a quick mockup for the Foo Bar 406 

Welcome to the world of design piracy 413 

What kind of web worker are you? 416 

Red Lantern’s got a new prospective client 421 

What really goes into designing a website? 424 

Figure out a total bid... 425 

Use a proposal letter to deliver a detailed quote to a client 431 

The Trilobite podcast: a(nother) new challenge 433 

Use Creative Commons to license your work 433 

Creative Commons Licenses 434 



Client Requirements 

I I A static website with a front page, an About □ Several different designs (paper is fine) 
page, a contact page, and three separate to choose from, and an ability to provide 

product pages. design feedback that will get incorporated 

_ into the final site. 

I I Standards-compliant code. Trilobite’s site 

has to work on all sorts of devices, too. |—| Low . key usabiMty testing to make sure there 

□ aren't any problems before the site goes live. 

Some type of screen effect for their 
product portfolio.Trilobite wants to appear 
cutting edge to represent their work 


Red Lantern Project Estimation Worksheet (RIPEW) 


Job description: 

Client Name: 

Project Description:. 


Initial Input Time: 

Client Meetings: 
Background Research: 


Prc-productiow time: 

In-house Meetings: 
Information Architecture: 


Theme Concepts: 


drafts and design Revisions: 

Client Meetings: 
Storyboards: 

Storyboard Revisions: 


Production Time: 

XHTML and CSS: 

Back-end Programming: 
Graphics and Artwork: 
Copywriting: 

Validation and Debugging: 


Miscellaneous Expenses: 

Fonts and Graphics: 


General Supplies 


Totals 
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The Top Ten Things (we didn’t cover) 

We’ve really covered a lot of ground in this book. The thing 

is, there are some important topics and tidbits that didn’t quite fit into any of the 
previous chapters. We feel pretty strongly about these and think that if we didn’t 
at least cover them in passing, we’d be doing you a disservice. That is where this 
chapter comes into the picture. Well, it’s not really a chapter; it’s more like an 
appendix (ok, it is an appendix). But it’s an awesome appendix of the top ten best 
bits that we couldn’t let you go without. 



#1: Cross-cultural & international design 440 

#2: The future of web markup 442 

#3: The future of CSS 444 

#4: Designing for mobile devices 445 

#5: Developing web applications 446 

#6: Rhythm in your layout 447 

#7: Text contrast 448 

#8: Match link names with their destination page 449 

#9: Contrast is a fundamental layout device 450 

#10: More tools for design 451 


However, the potential of the web to deliver full 
scale applications didn’t hit the mainstream till 
Google introduced Gmail, quickly followed by 
Google Maps, web based applications with rich 
user interfaces and PC-equivalent interactivity. 


The collection of technologies used by Goog' 
christened ^^AX, in a seminal essay by Jesse 
Garrett of web design firm Adaptive Path. 


The bursting of the dot-com bubble in the fall of 
2001 marked a turning point for the web. Many 
people concluded that the web was overhyped, 
when, in fact, bubbles and consequent shakeouts 
appear to be a common feature of all technological 
revolutions. Shakeouts typically mark the point at 
which an ascendant technology is ready to take its 
place at center stage. 


The first of those principle 
that was also a rallying cry 

went down in flames after a neated battle witft iviicrosott. wnat 


more, two of our initial Web 1.0 exemplars, DoubleClick and 
Akamai, were both pioneers in treating the web as a platform. 
People don’t often think of it as “web services,” but in fact, ad 
serving was the first widely deployed web service, and the first 
widely deployed “mashup” (to use another term that has gained 
currency of late). 
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how to use this book 


Who is this book for? 

If you can answer “yes” to all of these: 


o 

❺ 


Are you comfortable with XHTML & CSS but don’t have 
any experience with web design? 

Do you consider yourself a web developer (working in 
a fun environment like PHP, Ruby on Rails, .NET) and 

want to become a better web designer? 



Do you need to understand web design for a course, 
your line of work, or you simply want to impress people 
at parties with your vast knowledge of The Golden Ratio 
and the Web Content Accessibility Guidelines? 


this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any of these: 


o 

O 

o 


Are you someone who doesn’t have any experience 
with HTML/XHTML & CSS? 

Are you an accomplished web or graphic designer 
looking for a reference book? 

Are you someone who likes to build webpages with tools 
like Frontpage and Dreamweaver, so you don’t ever 
have to look at code? 




( -bKis is i\\t tasc, dor!i 

wovty . 今 。 up Head P»v-st 
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this book is not for you. 
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the intro 


Wc know what youVc thinking 


“How can this be a serious Web Design book?” 
“What’s with all the graphics?” 




“Can I actually learn it this way?” 

Wc know what your brain is thinking 




Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 


So what does your brain do with all the routine, ordinary, normal things you 
encounter? Everything it can to stop them from interfering with the brain’s 
real]oh — recording things that matter. It doesn’t bother saving the boring 
things; they never make it past the “this is obviously not important” filter. 


How does your brain know what’s important? Suppose you’re out for a 
day hike and a tiger jumps in front of you, what happens inside your head 
and body? 


Neurons fire. Emotions crank up. Chemicals surge. 


And that’s how your brain knows... 


This must be important! Don’t forget it! 


But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. 
You’re studying. Getting ready for an exam. Or trying to learn some tough 
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technical topic your boss thinks will take a week, ten days at the most. 


Just one problem. Your brain’s trying to do you a big favor. It’s trying to 
make sure that this obviously non-important content doesn’t clutter up scarce 
resources. Resources that are better spent storing the really big things. Like 
tigers. Like the danger of fire. Like the old school NES cheat code 
for Contra (t t 1 ~^ ~^BA). And there’s no simple way to tell your 
brain, “Hey brain, thank you very much, but no matter how dull 
this book is, and how little I’m registering on the emotional Richter 
scale right now, I really do want you to keep this stuff around.” 


sa 崎 


Great. Only 450 
more dull, dry, 
boring pages. 
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Metacognition: thinking about thmking 

If you really want to learn, and you want to learn more quickly and more 
deeply, pay attention to how you pay attention. Think about how you think. 
Learn how you learn. 

Most of us did not take courses on metacognition or learning theory when we 
were growing up. We were expected to learn, but rarely taught to learn. 


I wonder how 
I can trick my brain 
into remembering 
this stuff... 



The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 
Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 


But we assume that if you’re holding this book, you really want to learn how 
to design user-friendly websites. And you probably don’t want to spend a lot 
of time. If you want to use what you read in this book, you need to remember 
what you read. And for that, you’ve got to understand it. To get the most from 
this book, or any book or learning experience, take responsibility for your brain. 
Your brain on this content. 


So just how DO you get your brain to treat Web 
Design like it was a hungry tiger? 


There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are able to learn 
and remember even the dullest of topics if you keep pounding the same thing into your 
brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he 
keeps looking at the same thing over and over and over, so I suppose it must be.” 


The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 


But pictures and conversational style are just the beginning … 
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how to use this book 


Here's what WE did: 


We used pictures^ because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in the 
text somewhere. 

We used redundancy : saying the same thing in different ways and with different media types, 
and multiple senses, to increase the chance that the content gets coded into more than one area 



of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain 
is tuned to pay attention to the biochemistry of emotions. That which causes you to feel 
something is more likely to be remembered, even if that feeling is nothing more than a little 

humor, surprise, or interest. 


We used a personalized, conversational style, because your brain is tuned to pay more 



We included more than 80 activities, because your brain is tuned to learn and 
remember more when you do things than when you read about things. And we made 
the exercises challenging-yet-do-able, because that’s what most people prefer. 


attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 


^ S r Dr ■肫 


We used multiple learning styles, because joz/ might prefer step-by-step procedures, while 
someone else wants to understand the big picture first, and someone else just wants to see 
an example. But regardless of your own learning preference, everyone benefits from seeing the 
same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you 
can be more productive at learning for a longer period of time. 


^Sharpen your pencil 


And we included stories and exercises that present more than one point of view ， 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it — you can’t get your body in shape just by watching people at the 
gym. But we did our best to make sure that when you’re working hard, it’s on the right things. 
Thatj^oiiV^ not spending one extra dendrite processing a hard-to-understand example, 
or parsing difficult, jargon-laden, or overly terse text. 

We used people. In stories, examples, pictures, etc., because, well, because a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU caw do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cu*t -this ou*t 3hd 乙 k |七 

° h y° u,r 


o Slow down. The more you understand, the 
less you have to memorize. 

Don’t just read. Stop and think. When the book asks 
you a question, don’t just skip to the answer. Imagine 
that someone really is asking the question. The 
more deeply you force your brain to think, the better 
chance you have of learning and remembering. 

❺ Do the exercises. Write your own notes. 

We put them in, but if we did them for you, that 
would be like having someone else do your workouts 
for you. And don’t just look at the exercises. Use a 
pencil. There’s plenty of evidence that physical 
activity while learning can increase the learning. 

❺ Read the “There are No Dumb Questions” 

That means all of them. They’re not optional 
sidebars, they ’re part of the core content! 

Don’t skip them. 


o Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 

o Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

o Feel something. 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 


Make this the last thing you read before bed. 
Or at least the last challenging thing. 


Part of the learning (especially the transfer to 
long-term memory) happens afteryow put the book 
down. Your brain needs time on its own, to do more 
processing. If you put in something new during that 
processing time, some of what you just learned will 
be lost. 


(@) Talk about it. Out loud. 

Speaking activates a different part of the brain. If 
you’re trying to understand something, or increase 
your chance of remembering it later, say it out loud. 
Better still, try to explain it out loud to someone else. 
You’ll learn more quickly, and you might uncover 
ideas you hadn’t known were there when you were 
reading about it. 


Design and Build Websites 

There’s only one way to become an experienced 
web designer: design and build websites. Now, this 
might mean building layouts on paper, doing card 
sorts to develop your information architecture, or 
writing lots of CSS. The point is that you will never 
become a great web designer if you just read about 
it — you need to do it. We’re going to give you a lot 
of practice: every chapter has exercises that pose 
problems for you to solve or asks questions that you 
need to think about. Don’t just skip over them — a 
lot of the learning happens when you work on the 
exercises. We included a solution to each exercise, 
so don’t be afraid to peek at the solution if you get 
stuck, but try to solve the problem before you look 
at the solution. And definitely get it working before 
you move on to the next part of the book. 
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how to use this book 


Read Me 

This is a learning experience, not a reference book. We deliberately stripped out everything 
that might get in the way of learning whatever it is we’re working on at that point in the 
book. And the first time through, you need to begin at the beginning because the book 
makes assumptions about what you’ve already seen and learned. 


We start off by teaching one of the most important concepts in 
web design — the design process — and then we move on to more 
specific design topics. 

The design process is the foundation for developing a great-looking website. Each step gets 
you closer to better pages, and along the way, you create everything from a visual metaphor 
to a map of the site’s content. Once you understand the overall design process, you can 
then dive into the details and begin building beautiful websites. 

We advocate standards compliant XHTML & CSS. 

All of the code that you write during the course of going through this book is standards 
compliant. This is really important to us, and we would (adamantly) argue that 
understanding how to think in and write standards compliant XHTML (XHTML 1.0 
Strict) & CSS (CSS 2.1) is one of the hallmarks of a talented web designer. There will be 
no tables for layout, no style information in your markup, and all those <p> tags will be 
properly closed. 

All of the code in this book is available on the Head First site. 

Most of the projects in this book will require you to download the code for that particular 
chapter. Actually, you should just download all the code from the beginning so that you 
have it ready when the time comes. Sometimes we will ask you to make changes to code 
that already exists and will provide and “before” and “after” version of the markup and 
stylesheets. 

Every bit of code is not fully explained 

We assume that you have a working knowledge of XHTML and CSS and, therefore, don’t 
make it a point to explain every nuance of the code. The important stuff is covered, and 
the downloadable examples are well documented. Remember, we’re trying to make you a 
better designer not teach you the ins and outs of XHTML and CSS. 
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The terms M comps w and ^storyboards 99 are used interchangeably. 

We introduce storyboarding in this book as method for quickly mocking up design 
ideas without committing tons of time to code. Sometimes these are referred to as 
“storyboads,” but other times we use the term “comp” (or composition) in reference to 
the same thing. 

We assume that you are using modern browsers. 

While we’ve taken every measure to make sure that our code is cross-browser 
compatible, you should use a modern browser (IE7+, Safari, Firefox) when putting 
together the sites in this book. While older browsers (notably IE6 and below) will work, 
you results may vary, as those browsers are buggy and incredibly finicky. 


The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the book. 
Some of them are to help with memory, some are for understanding, and some will help 
you apply what you’ve learned. Don’t skip the exercises. 

The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you’ve learned. Most reference books 
don’t have retention and recall as a goal, but this book is about learning, so you’ll see 
some of the same concepts come up more than once. 

Our markup and CSS examples are as lean as possible. 

Our readers tell us that it’s frustrating to wade through 200 lines of markup or CSS 
looking for the two lines they need to understand. Most examples in this book are shown 
within the smallest possible context so that the part you’re trying to learn is clear and 
simple. Don’t expect all of the examples to be robust — or even complete. They are 
written specifically for learning and aren’t always fully-functional. 

We’ve placed files (markup, CSS, images, complete pages) on the Web so you 
can copy and paste them into your text/markup/code editor. You’ll find them 

at http:/ / www.headfirstlabs.com/books/hfwd 
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Technical Reviewers: 
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Arts in Graphic Design and is working toward a Master’s 
in Software Engineering. In her spare time, Sarah enjoys 
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Johannes de Jong is an old dinosaur mainframer that 
loves to go over to the wild side — building websites, from 
time to time. His latest experiment is a Google Maps site 
built with Apex from Oracle, and yes, he will use this book 
to redesign it. 

Matt DiGangi is the creator, designer, and editor of the 
website Thieves Jargon (www.thievesjargon.com). He lives 
in Boston. 


Ashley Doughty is a Senior Web Developer from Maine, 
living and working in the Greater Boston area. She is a 
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time. 
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Safari® Pooks Online 


Safari^ 

Books Online 


When you see a Safari® icon on the cover of your favorite 
technology book that means the book is available online 
through the O’Reilly Network Safari Bookshelf. 


Safari offers a solution that’s better than e-books. It’s a virtual library that lets you 
easily search thousands of top tech books, cut and paste code samples, download 
chapters, and find quick answers when you need the most accurate, current 
information. Try it for free at http : // safari . oreilly. com. 
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Beauty is in the eye ♦ 

of your user 



It’s a great big (wide) world... but who’s really out there? 

So you’ve got your nice shiny XHTML and CSS diploma hanging on the wall, and the 
prospective clients are ringing your new business line off the hook. Cool, right? Yeah... 
until you get your first complaint about a bad layout, or a logo that’s just so 1998. So how 
do you create really beautiful websites and still make sure they satisfy your users? 

It all begins with good planning. Then you’ve got to write for the Web, know your 
audience, and, above all else, make sure you’re designing for your users, not yourself. 


this is a new chapter 






welcome to the big time 


Your big chance with Red Lawtcrw Pesign 

Jane’s just bought a small web design studio. Red Lantern Design’s 
been producing small sites for local businesses for several years, and 
now Jane wants to expand their client-base. But there’s a problem... 

The old Red Lantern webmaster used a WYSIWYG editor to create 
the company’s own site, and now no one can edit the files. Jane’s hired 
you to build a new site that will bring Red Lantern up to modern web 
standards and bag the company more lucrative clients. 



av\d y\c^j ov/v^cv- ok 
Red Lav^ev^ Pe 呼 . 


Ive bought a kiosk at an international business 
conference in a week. I doiVt know a thing about web 
design, but I know you do. So you need to design 
a really impressive new website as quickly and 
efficiently as possible. Think you can do that? 



Well, sure you can. 
Where do you think 
you should start? 


2 Chapter 1 





building beautiful web pages 


^I^Sbarpen your pencil 




Here’s the current Red Lantern site. Take a look at the screenshot 
and, using your web design expertise, annotate it. Note what you 
like. What do you dislike? Do you see any problems? 
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what did you think? 


r %|harpen your pencil 

Solution 


Here’s what we thought about the site. Your answers may be a 
little different, so don’t worry if you didn’t catch all of these. 
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building beautiful web pages 


Where do you start? 

There’s not a lot that’s good about the existing Red Lantern 
site — the logo’s nice, but that’s a pretty damning comment on 
the rest of the design if that’s all there is to like. But if there’s 
so much wrong, how can we figure out what to work on next? 
Where would start? 


Uh, yeah, so uh y I know where I’d 
start. I, uh y know HTML So Td start 
with the code. Get to it right away. 
Then rd work up some, uh, CSS and uh, 
thafs it! Okay? 


o 


Joe BU tWmks a ^ 

do you *tWmk? 


^harp^n your pencil 



Is Joe right? Is there anything else to do? Where would you start? 
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start before the part where you code 



Are you kidding me? How am I 
supposed to know where to start? 
Ive got a whole bunch of stuff I 
need to do, so you tell me. What 
should I do first? 


“Where should I start?” and “Where 
should I go from there?” are really 
good questions. 

The fact you’re still asking yourself those questions 
without opening a text editor is a good sign. The 
answer to both is, always follow a design process. 
A design process structures your project so that 
you stay on task and don’t go off in every different 
direction all at once without accomplishing anything 
but stress, stress, and more stress. 

A process is really just a workflow that determines 
the order you do things on a web design project. 
Imagine you’re building a house for someone. It’s 
their dream home, they’ve got a ton of ideas on 
their wishlist, and you also need to include the usual 
things you’d expect to find in a house: walls, floors 
roof, kitchen, bedroom, bathroom, living areas... 


Now ask yourself where you’d start? Would you 
build the walls first? Would you pick out fabrics, or 
draw up a blueprint? Which one is going to pay off 
two weeks from now? Two months? Two years? 
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building beautiful web pages 


Praw up a blueprint FIRST 



So building a website is a lot like building a house. If you start 
with a blueprint, you’ll know exactly where you’re headed 
at every step: foundations, load-bearing walls, and so on. 

For a website, you use Information Architecture 
(or IA). IA is the process by which you break your 
website’s content into chunks and then organize 
those chunks hierarchically in relation to one 
another in a way that’s logical. 

Most of the time, each chunk of information is 
content (text, images, etc.) that lives on a single page. IA is 
also closely linked with building your site’s navigation. So, if 
you’ve got bad IA, chances are, you’ll have a bad navigation 
system as well. If your site doesn’t have solid IA, it will feel 
disorganized and confusing to users. And that will make users go 
someplace else to get what they’re looking for. 


-Po\r you\r house 
stairts With a blucpv-iht 


卜七 his 七 yp 々 l Vcvcv^sc 

upside— 

looks like 

a WsVv 


The blucpv-'m*t a v/cbsi"t< 

"is |K\-fo\rw>3*t»or\ 七亡乙七认 代 . 





P ⑹ k dow ^ youv^ 幻士竹七 i 山 

lo^l dh^ks ihai h> 

each othc^r ih a h ovdeved Kicvav^hy. 


The w Pv"m 七 Books, 
section is iAr\dcv* 
w Pv*odu 乙 section. 








^ -finally -the -two (ialcgovics 
P 〜 ted books 沘 c listed uhdev 
the U P\riht Books" sedtioh. 





What content do you have for 
the Red Lantern site? How 
will you order it? Will you 
need any more material? 
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information architecture 


Sharpen your pencil 


Start the Information Architecture process by asking Jane about the 
content she wants for the site. 

Here’s a memo from Jane telling you what sections she wants on the site. 
Write down a one or two word description for that "chunk” of content. 




MEMO 

From: Jane 
Subject: Site content 

Let's have a section of 伽娜 we ^ 

news items and updates about Red Lantern. 

We definitely need a section of the site where 
we can show off all of the awesome wor 

we，re going to do. 

The site needs a contact page. How would we 

ever get clients without a contact page ■ ■ 

,think it would be good to ^ve ^ect.on of 

t h e site about the company-what we do¬ 
th at kind of thing. 

We need to make sure they know we do 
consulting and web design. 
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building beautiful web pages 


Once you’ve worked out the sections of information for the Red Lantern Design 
site, you can start to build your Information Architecture diagram. Fill in the spaces 
provided with your individual sections from the facing page. 



x/ouv IA 产， 

愐 ㈣ 丨如 W^V> 7 . 






\A/V^a*b w 6Wks” d 
toM lwc m 





Rcrwcrwbcv-, eddli r^ew 
\rov/ is a subscdiio^ o( 
"the section above- 
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whafs your architecture? 



You started the Information Architecture process by asking Jane about 
the content she wants on the site. 

Jane let you know what she thought the sections should be. Here are 
some possible one or two word descriptions for each "chunk” of content. 



News f Updates 


Po\rtfolio 


Coh*tad*t 


About Us 
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building beautiful web pages 


Given these "chunks” of information, how does your IA diagram look? 


I ， ou, IA -e w ade a-am 

Home 

^ users-tV^ai Ked 
docs bo-tV. to^\h^ 
v/eb dcs» 沪 . 



p added the 7W W ， ▲铋 

七 he ho. c p a3c . Thjs wj|| ^ ^ 

,v '^9 -thc\rc ahd give -therh a qui<ik 

Red Uh “J 二 

^ hc dom P 扣 y does . 組饮 that, 

exp o\rc -the o-thc\r subsc^-ti< 


usevs 


•Ohs. 



Undcv- u Scv-v'itcs 
added ou\r *tv/o 乙 W 灼 ks 
-fv-om Ja^s memo 


”'七⑽ d u /V C ws f Updat« w 

2°> s ^ sih^c it medhs 

七 he same thihg a^d will save 
spa^c ih the r^ehu. 


theretcire no ^ 

Dumb Questi9ns 


Do IA diagrams always have to look like a reverse 
branching bush? 


A 


Couldn’t I just skip this part of the process? This IA 
diagram and the one on page 7 look pretty similar... 


No, though the reverse branching bush is probably the 
most common way IA diagrams are done. Honestly, any kind of 
diagram that accurately and clearly represents the sections and 
subsections of content (and the hierarchical relationship between 
them) works just fine. 

Will the people I design sites for always be as clear as 
Jane about what sections they want? 

Yes... and no. You'll be amazed at the extra details about 
sections and design ideas that come from just talking to people. 
Just because they may not know the names that sections on a 
site are commonly called, doesn’t mean they don’t have a clear 
idea about what they want their site to contain. Then it’s up to you 
to organize the sections logically and hierarchically. 


A 


No! Don’t skip IA, as it can often determine parts of the 
design when you come to lay out the site. Besides, although 
there are some similarities of structure, every site is different, 
and some sites will have a lot of subsections. The more content 
you have and the deeper your IA diagram, the more complex 
your navigation system will be. You'll not only need top level 
navigation, but second tier navigation as well. But don’t worry, 
we’ll cover dealing with IA in a lot more detail in Chapter 3. 

Q/ Is an IA diagram just like a sitemap? The “chunks” just 
look like links... 

An IA diagram shows a hierarchical relationship between 
sections and subsections of content in a site. It isn’t meant to 
show links between sections, but you will use it when you put 
together the navigation for your site. In fact, let's take a look at 
that next... 
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what is good navigation? 


Cmon, all we need for good 
navigation is some buttons that 
link to all the pages in our IA 
diagram, and were good to go... 



Will that be enough to help your users 
find their way around the site? 

You need to think about navigation twice in the design 
process? First, you need to think about your navigational 
elements — yes, things like buttons and nav bars — while 
you work on the overall layout of the site. 

Navigation will show up again when you begin writing 
the code and building the layout elements that have to do 
with users finding their way around the site, as well as 
linking your pages together. But don’t jump the gun, you 
need to start by organizing your top level navigation. 

Information Architecture isn’t just important for 
organizing your site’s information; it’s a big deal for your 
navigation as well. So, when it comes to building your 
site’s navigation, keep your IA diagram close at hand. 


12 


Chapter 1 




building beautiful web pages 


PctcrmlwG your top level wavigatiow 

Top level navigation is usually the most prominent navigational 
element — the tabbed nav bar at the top of the 
page, the vertical nav menu in a secondary 
column, etc. More often that not, your top level 
navigation links to those sections one tier below 
the home page in your IA diagram. 



Bemuse you moved the u About Us w 冰七 IOh 

to the W page Red Desia^s 

site, its easy b> the hoy level 

i h youv^ \f\ d\a^. 
fc>ut how will you style the 




^harpn your pencil 


Draw a few sketches of the kinds of menu you’re already familiar with and start 
thinking about which menu type would suit the Red Lantern site. 
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which style of navigation? 

r 〜 Sharpen your pencil 

Solution 


Which top level navigation design do you think will work best for 
the Red Lantern Design site? If you don’t know, how do you think 
you’ll work it out? 




ttov-izjohtal 

-fo\r -fcop 


V level havigatioh 
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building beautiful web pages 


Put it all iw context 

The point of the top level navigation is to show your users where they are within 
your site’s main structure. We’ll come back to navigation in a lot more detail in 
Chapter 6, but for now, you need to ask yourself how you’ll style the menu on 
the Red Lantern site. Time to start thinking about which menu type would suit 
the site and where it would fit on the page. 


Horizontal tabs 


,Us used U ^ 


Horizontal buttons _ lev , cl 


visible ov\ rwousc ovc\r, v/hi^h is a 



Vertical menu 


Vertical tabs 



tidal r^Chu -Po\r 

level havigatioh. 

|dk V/— ?C。— 

s 七 staved add 叫 
^us *to s'»*tcs, 
_»s v/as -tV^c 七 

a“7?e d 一 u . 
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-top level 灼 a〜aW 
sbj\td Wrbh CSS 
a 灼 d ways add a 
veal notebook -feel 
-to 七 Wis s\*bc. 

Hohtc this sites 
^Ohtcht is w\ri"tteh 
FlrChdh. See appehdij 
J *PoV" dedlih^ y/itli 
•^ulti—language si-fces 


Guide de Prague 
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pencil and paper? 


Show Jane some basic design sketches 

So you’ve got the main content mapped out. What will 
you need to do next? At this stage, it’s a good idea to 
show Jane some basic design sketches... 


Hold it right there! IA diagrams, 
sketching designs on paper... Whafs 
with all the drawing? I thought this was 
a book on WEB design. I don’t see much 
of that happening so far... 


Having a clear idea of where 
you want to put the building 
blocks on screen saves valuable 
development time. 

It’s much quicker to sketch a few designs on 
paper and get Jane’s reaction before you 
start than it is to waste time working 
up the code for a bunch of designs 
when she can only pick one … 
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building beautiful web pages 


Sketches keep the focus oh fuwctiowality 

Your first sketches should be black and white and drawn on paper. 

That way, Jane will be completely focused on the basic layout of the 
design (instead of what color the background of the page is or how 
great her logo looks placed over that image or... you get the picture). 


Your designs should show Jane some basic layouts with the content she’s 
requested in various configurations on the page. The sketches should 
make Jane ask herself questions like: “Do I want a large image at the 
top of the page?’’，“How many columns do I want?”，“Where should 
the menu go?’’，and so on. 


Sharpen your pencil 


TVis design is -too similav- -to 
"the site dcsi^h -PoV" 

Jahe … time -Po\r you -to 0o 
badk "to the d\rdv/ih^ bodv^d- 


Here’s the first sketch we showed Jane. She didn’t like it because 
it looks almost exactly like the existing design, but with the main 
content section broken into two columns. 

Now it’s up to you to come up with a basic design Jane does like. 
Draw at least three more concepts on your own sheets of paper. 


Use V)0\r'izoy\*tal li^ s 

nr\S*bc3(i 

七^七 .(Ao 灼七 
irv\u£>V) a 七 

七 Wis stay. 


Use 七 he skc*tdV>cs 


*to yt youv* ideas 

dovm 。灼 papev*. You 


y/oV*k ou 七七 he 

details la*tcv-. 



you are here ► 


17 
















sketch out your navigation ideas 


r 〜 Sharpen your pencil 
、 v Solution 


Basic black and white sketches keep the focus on the main layout. It’s 
time to show the basic layout concepts to Jane. Which will she choose? 



5 
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"the "two—dolumh dcsi^h 
•Pov* a pi^-tuvc a^d -the 
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images o-P sites Red 
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rrt^ 


I like the look of 3 best. But, 
uh 7 can you show me some more 
detail? We need the site to be 
ready for the conference. 



o 



Great, you’ve agreed on a basic 
design, what will you do next? 
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whafs next? 


0 


So weve agreed on a basic layout with Jane, 
but what should our next step be? Firing up 
the or text editor, grabbing some sample content 
from Jane, and working up an XHTML storm? 



Frank: Nope. We’re going to stick to pen and paper for now. What 
do you think about adding some color to those sketches? 

Jim: Why would I do that? Can’t I just get going with the code and 
test different colors using CSS stylesheets? 

Frank: Well, this way, you get a chance to see how colors interact 
with one another, how interface and layout elements play off one 
another once they’re in color, how your navigation system looks in 
relation to the rest of the layout, and generally whether content’s 
represented in the best way possible. 

Joe: Wow. That sounds like a tall order for one little sketch. 
Couldn’t we just have shown Jane a few color versions instead of 
going with the black and white sketches? 


Frank: Clients can get distracted by color too early in the process. 
It’s best to show them something that gives them an idea of the 
functionality of the site — 

Joe: — before we start on the look and feel part of the design process. 
I get it. The sketches provide us with a painless way to catch any 
potential design problems before we start coding our design, and 


they become major obstacles. 


Frank: There you go. But we’re not just doing one sketch here, Joe. 

Joe: No? 

Frank: — 

Jim: — No. We’re going to do a ton, all in different colors, and show 
them all to Jane like we did with the first sketches, right? 

Frank: Kinda. What we’re actually doing is creating storyboards to 
test a few variations. We’ll show Jane the best one or two. 

Jim: Wait. What? 

Frank: Yeah, these are like the storyboards — you know, that 
sequence of little sketches that look like a comic strip — the film 
industry uses to test out shots before rolling the cameras. We’re 
doing the same thing. Here, let me show you a neat trick for creating 
good storyboards. 
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red lantern storyboards 


— ^jlarpen your pencil 

〆 sosan 


Finished 刀 edl_antem storycroard. Yours might look a little different, 
but this is the level of detail you want to see in a final storyo-oard. 
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building beautiful web pages 


Fireside Chats 

mm 

Pencil: 


Tonight’s talk ： Pencil and Design Program discuss Storyboards 


Design Program: 


Yo, Design Program, can you clear something up for me? 


Sure. What’s up? 


Well, I’ve gotten a little confused over here. Some people 
have started calling me “wireframe,” but I thought that 
was a term that’s used to describe code mockups... 


Yeah. It can be confusing, as people also use the term 
“wireframe” to refer to a code mockup that isn’t totally 
fleshed out yet. But now isn’t the time to get into code. 


Code [eavesdropping]: 


Pencil: 


Hey! I heard that. 


Sorry, buddy, but Design Program’s right. You might 
think you’re saving time by diving right into HTML, 
but it could end up costing you in the long run. See, if 
your client (or you) doesn’t like the design you came up 
with and wants to go in a completely different direction, 
you’ve just invested tons of time in to HTML (and 
probably CSS) that you’re not going to use. It’s a lot 
easier to file a storyboard away and start with a fresh 
sheet of paper. 


I’m not so sure. I prefer not to get all hung up on detail. 
The whole point of storyboards is that they’re a quick 
and flexible way to brainstorm ideas and get some 
designs down. Besides, why waste a ton of time slaving 
over every pixel’s placement in several designs when the 
client’s only going to pick one? 


Design Program: 

— or a new file. I’d go the formal route right from the 
start. It saves a ton of time as you can copy details right 
out of the storyboards into the final design if they work. 


I guess you might have kind of a point there, but are you 
really going to show your messy, smudged, coffee-stained, 
self to the client, Pencil? 


I guess if you’re preparing a pitch for a potential client, 
it might be a good idea to come up with something 
more polished and formal. But I still think detailed 
hand-drawn storyboards should be your first stop when 
you start to design a new site. 
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prototype after design 



The storyboards look absolutely wonderful. 
The design and layout for the site look 
great. But the conference is in two days... 
Can I see it on screen? 


Now^ifs time to prototype the site in code 

Building a prototype in code has some great advantages. 
First, even though your design might look great on paper, 
it might not work (technically speaking) when you code it 
up. The prototype will give you an opportunity to quickly 
fix anything (code-wise) before you invest too much time in 
building a polished finished product. 

Also, if you’re working with clients, a code prototype gives 
you something to show them, and just like your storyboards, 
you can get useful feedback and make iterative changes. 


What do you mean, iterative? 

J T1 Alo V Iteration is a design methodology 
* ^ V ^ that lets you test, analyze, and refine 

prototypes of work in progress. At 
each stage, you go through each of the steps in the 
design process — it’s cyclical — until you get something 
you (and your client) are happy with. 
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building beautiful web pages 



Go ahead and grab the files for the first code prototype from: 

www. headf irstlabs . com/books/hfwd/chO 1 

Then we’ll give it a quick test drive to see how everything’s looking. 


* Red Lan' 


0 ; 


body 1 
margi n * 

padding ： 0 ； I ? 

background: # H 

62.5 5 l 


font-f 


font - size• 
color: # 333 


KU 必 P, 1 

margin ： 0 ； 


padding• 


0 ; 


P 


font - size. - 
line-height 


ul 


list-style 一 ty 


g^an * / 

<!DOCTYPE html PUBLIC //W3C//DTD XHTML 1.0 Strict//EN 

，， http: //www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd M > 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=” en ” i ang 

<head> 

<title>Red Lantern Design</title> 

<meta http-equiv= M Content-Type M content= n text/html - 
charset=utf-8 M /> 

<link rel = n stylesheet" href="stylesheets/screen.css 




css 


type= M text/ 


/> 


4< 


m e d i_ a = n s c r e e n i 
</head> 

<body> 

<div id= n masthead n > 

<hl><img alt=，，Red Lantern lQ go n src="images/rl_logo.png" /></hl> 

<ul id= M nav M > 

<li><a class=”active” title="Red Lantern home” 
index. html M >Home</aX/li> 

<li><a title= M Design services" 
services.html M >Services</a></li> 

<li><a title=-Our work” href="portfolio.html->Portfolio</a></ 


href: 


href: 


li> 


Repeat 7 ouvscl*f 

,«d HTML U 

m 7 our ^ 出 aya 州 . 

Out youvc dowloadcd 

Ales aaordm^V - Yo^ 11 lmk 
*m *tV>C 〜 d. 


•<a | ： itle= M Contact Red Lantern' 
^H > Contact</aX/li> 


> 


der "> 


tokyo buildings" src= M images/tokyo.jpg" /> 
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test drive 




Tesr DriVq 


Time to check the site out in your browser. Once you’ve tested the site, 
show it to Jane to get some fast feedback on this iteration. 


»>r> o 


RED LANTERN 
DESIGN 




« _ 1 1 ■ iyp li, TJ= 


Lofism ifuum dubf m bf^i. Ad«iiSf<-a qu 

Mam wi flrvi _ In } mju ^ DbwH Fluca 

rTWtMM Miar Dowc tor-orfiui 

Tn-o&is- & ^^sque-a wh Mwcvnu wj turp«5-in dd4&v 
□lm^w vy^pula^^ 5usp(?n(Hs<K- ui veh eu du4 ws^jbULri! 
tnnpAii Domk ddfcpr mmc, uuc\ar Id. cPgpIssim wd 
?fKX)cux uL firtui P^otor^PsqiJD Id nl^ Nufioi dncndunl 
JJllD ™： CtUI. hCHIDBfiU fTiJri»LKldD FTlCDttt »l P4ul£mi 

vfla# quar^i ^ih> hdus suiopft -dc^lor. dcnoc wc arcu 

Hum lacirlA kH iffya 9a_Mf5qu 呀 

Cu『DtHlLir rahloAi kKDrr Kd imj &ed riwnciHi 
PMan^siK^M DDipniodo f«uabu» rMbfi. Dif^s as-I nugna. 
ccFidKTmpftLim bL ntendum *e cpmanr ac nliJ. r^ki ™i 







































building beautiful web pages 



Here’s the text Jane just sent over. Grab a stopwatch and set it for 15 
seconds. Hit the Start button, and begin reading this text. When your time’s 


# 




MEMO 

From: Jane 
Subject: Site content 

Peop，e are .ore 瓣祕 以 

product, whatever the consump 10 .. th t they 0 ffer designed experiences, 

interactions. Successful necessary resources to enhance 

regardless of service or product， desiqn , they are hungry for 

both. People are not only m0 ^ satisfy them on many levels: aesthetic, 

images, themes and experiencesth for “ good ” design. Design is 

pragmatic, ideological, cultura_ ^ emphasize a thorough, deeply 

about connecting. Working with our c ==， P Naming and listening. At the 

considerate research process = an J contexts. We design for real 

same time, we center the proc unc j e rstand that real people are looking 

people, not demographic targ ■ processes and designs in creating 

for something more and our designs and builds simple, usable 

are fast, readable, and accessib.e - a., using web 

We specialize in: interface design - designmg^ ^^ooldng to update 

templates using Markup and css optimization - simplify markup and 

二工師 s_— dinars. 
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bad copy is bad 


Pow't rum a good design with bad copy 

All the awesome design work, storyboarding, and prototyping in the 
world is not going to save your site if you don’t have any content (or 
if the way you present your content stinks). So how will you ensure 
your content’s interesting? 

Writing for the web is different than writing for regular print. 


Come on, writing is writing. 

There’s no reason to re-write some 
text, especially for a website... 



Instead of reading your content from left to right ， 
beginning to end, like a book, users scan the text 
for keywords and concepts — to give them an idea 
about the contents of the page. 

When you combine this with the fact that users generally don’t 
spend that much time on individual pages, you know you are going 
to have to write differently. The word of the day is scannability! 
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building beautiful web pages 


What makes text scannable? 


There are several techniques you can use to 
make your text scannable. Short paragraphs, 
headings, bullet points, and clear meaning will 
all help users scan your content more easily. 


Clca\rly wv-i-fc-tch 
headers give the 
ih-pov-matioh 
about the whole 

3\rti^lc dhd rts 
subsc^tiohs. 




/\ b/ic-f \Y\brodub>^ settlor 产 ov’ides 

a 灼 ovcv"v'icv/ That ㈧ 外 
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be the editor 



jCph 苢 ExGRdSe 


Here’s the text Jane just sent over again. Rework the copy so that follows the scannability checklist. 






# 


Pd0 八 


MEMO 

From: Jane 

:: :二二 ^ ===== 

reaardless of service or product, a desicin they are hungry for 

pragmatic, ideological cultural^^^ thorough, deeply 

br at T ^ 

the same time, we center the P^cess ^ ^ under stand that real people are 

look^g ^something mSnd uTtlm^es^ 

- aCC6SSib，e - a " USm9 

^ ^in ： interface d?g n - 

口 1 二=巧^ 

ss 二一一: 
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building beautiful web pages 


/ou do^i have -to use them all, just the 
° hCS "that woirk -Po\r youv- dohtcht. 


Scmmbilny checlM 

D Cl ea rf y written headers 
Small (i s h) paragraphs 

D Use bo,d and italics to 

emphasize important 
words w phrases. 


Use lists (ordered 
or unordered) for 
appropriate content. 
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good copy is good 



JtPrtf ExeRciSe 

SoLiitlOH 


You edited Jane’s text, following the scannability checklis 






# 


Pd0 八 


MEMO 


Seanimh 卿 CheclM 

Clearly written headers 

0^ paragraphs 

0^Jse bold and italics to 
emphasize important 
words w phrases. 

Q^ Use lists (ordered 
or unordered) for 
appropriate content. 


From: Jane 

:二 ::1 一 ^ 

reaardless of service or product, a desicin they are hungry for 

pragmatic, ideological cultural^^^ thorough, deeply 

br a ^^ 

same time, we center the process^ that rea l people are 

look^g Csomething mo^and 

- aCCeSSib，e - a "" 

^ ^in ： interface d?g n - 

口 1 二=巧^ 

ss 二一一: 


using 
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building beautiful web pages 



Your text might look a little different, but as long as you’ve used the techniques to make the 
text more scannable, your users will thank you. 



lAfeldomc *to *thc New Red Desiy 


uscv* 

l^loie, you >wor / 七 meed 
or\t a*t -the -top o( 

七 V>c as {\\t I050 
vy'ill scv-vc as a headev 
-fov* 七 he fay. 


Red Lah*tcrr\ is a small web desi^h dhd -firm spcdializj^^ *m s*tar\dards-bascd 

y/cb desi^h a^d dcvclopmch-t- Our goal is *bo build simple, beautiful y/ebpages 七 make 
youv 'm-fo\rma*tioh easy *bo -f md dr\d you\r users happy. 

l-f you or your dompahy arc *m*tcrcs*tcd *m y/ovkmg y/i*th us, please dhcdk ou*t our 
po\rt-folio o-f desi^h dhd brdhd'm^ work dhd Coy\{^c{, us wi*th your projcd*t details. Wt 
look -forward *bo -froma you dhd mak'm^ your preserve on -the web 3 little simplev 

dr\d easier *bo f md. 


V\t^i our -full po\rt-folio 

Cor\*tad*t Red Larrtrn^ 



TV>CSC Irnks Will be a shov 七 
u^a^cd list bullet 

pom-U \rcmovcd by ouv C^S. 



Thafs a serious rework right there. Mine 
wasn’t anywhere near as, uh, comprehensive. 
Won*t Jane be mad at you for cutting out all 
her carefully crafted words? 


Sure, she could be. But this version is short, 
to the point, and a lot more compelling. 

It tells users exactly what Red Lantern does, and what they 
can expect from working together. We edited out a ton of 
content — long words, sentences that you had to read three 
times to understand, and so on — that would have clouded 
this simple message. 

Besides, worst case, we can compromise with Jane and put 
back in some of her text... carefully edited, of course! 










test drive 




Tesr DriVq 


Once you’ve edited your text so that it’s more scannable，all you 
need to do is update the text in the code markup that you’ve 
already developed for Red Lantern, test it in your browser, and if 
you’re happy with it, show it to Jane. 





I love it! Yes, even the 
shorter text. You were 
right to cut most of mine. 
Your skills are going to help 
put Red Lantern on the 
map! I caiVt wait to start 
some new projects. 


、 [fi I [ + j hi be i_ 


i^CKihllTtl 


歐 Areh lantern 



^ DESIGN 

H&m« Sam»i Pon 

M C4n»d 


I Vi ni^rr 4 

_ _ V i ■ J * _ 


F ■ "PTF 1 








□ur 


Red LaniL&m buHd& un^uc interface ^ user Mperl&ric^s for I he web. 

邮 ft Welcoinfi lo the Red 

Lantern Design 


Rid Lartefn m a imifl wub da sign and consuming fcm 
5pcroai\2ir>g ii simdurds-bBwd mb d«<rn and 
tkmilopfTncml. Our [pculs Lo bjM arnphi. benijinul 
>VQtfiag«9- VibI rr^fiAjp v^put mformmlKm iq 毳 sv I 。 -and ： 
Sfmjr 


in happr 

ir pKPPr if^ur cwnEiiJiy (| kntM»flid n wfilng wffi us, 

plan 關 0HRCk wl our poftiqlip 01 Apflgii mii) tvOndng 

work and fxrrlnd us ftflli ypyi prafppl Wp bgk 

InnHvdlbj hqAflng fr^m ygu nnd iThikr^n yp,ir pr-oMinci] 
4n _ ihfG □ tffl* umpftir pud iisiH lo tnj 


CpfTtiKlR^lJiP^n 
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building beautiful web pages 


Web design is all about communication 
and your USERS 


So how do the two versions of Jane’s site compare? Every site’s 
ultimate aim is to communicate something to its users. If your 
website doesn’t communicate what you want it to, your audience 
will go to another site looking for the experience or content that 
you couldn’t give them. 


This is known as User-Centered Design. When you build 
a website, you’re building it for your users, not for you. You 
design for your user’s strengths and weaknesses. You want to use 
every technique possible to bring users to your site, help them 
find what they’re looking for, make sure they have a rewarding 
experience, and keep them coming back. 


The process you followed in this chapter 



Pre-production using Information Architecture and 
storyboards to build a blueprint for your site so that you’re as 
efficient and focused as possible when you go digital. 

Navigation is based on your IA diagram. It’s more than 
just linking pages together. Navigation helps your users find 
information. 

Layout uses HTML and CSS to build the site’s interface 
(which you already came up with on paper back in the pre- 
production phase). 

Writing “fills” the design up with the scannable content that 
your visitors come to the site for. 



The old dcsi^h didh’t 匕 ommuhi 乙 
at all "to usev-s... 


丁 site hd uscv"S 

yt 30. h a it j^rabs 

'm*tcV"CS*b *tclU 3 
tornfcllmj s-tovy- 



—had just one aim: to produce a great-looking site that tells users 
all about Red Lantern Design. 
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web design toolbox 


Your Web design Toolbox 

Wow... 36 pages in and you’ve 
already managed to totally 
rework a pretty crummy 
looking website. Next chapter: we 
dig deeper into pre-production. 



BULLET POINTS - 

■ When you design sites, you should 
practice user-centered design—creating 
sites that focus on meeting the needs of 
your users. 

■ A design process helps you structure a 
project so that you stay on task and get 
things done in an efficient manner. 

■ Most, if not all, web design projects have 
4 components: pre-production, layout, 
navigation, and writing. 

■ Information Architecture is the process 
by which your website’s content is 
broken into chunks and then organized 
hierarchically in relation to one another. 

■ Developing your site’s IA is a two 
step process: organizing your site’s 
information, and building an IA diagram. 

■ An IA diagram visually represents the 
hierarchical organization of sections and 
subsections of information in your site. 


Top level navigation usually links to those 
sections in your information architecture 
one tier below your home/main page. 

The design of your top level navigation 
depends on the overall design and layout. 

There are a handful of great models for 
designing top level navigation: horizontal 
tabs, horizontal buttons, vertical menu, 
vertical tabs. 

Storyboards are used to visualize your 
design and test basic layout concepts 
before you jump into code. 

Storyboards are a great way to catch 
potential design problems before you 
spend time coding your site. 

Writing for the web is different than writing 
for print. 

Web users scan webpages instead of 
reading them from beginning to end. 

Web content needs to be written so that 
it's scannable. 
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2 pre-production 


本 Paper covers rock ♦ 



Tired of butting heads with a picky client? Yeah, you know the type... 
every time you show them their latest crazy design idea, they’ve already moved on 
to another look... another color scheme... another entire website. So how do you deal 
with fickle clients or those tricky hard-to-get-right websites? You start with paper, 
pencil, and a big fat pink eraser. In this chapter, you'll learn how to work smart before 
you dig into your HTML editor. Conning up with a theme and visual metaphor for your 
site, mocking up sketches in pencil, and using storyboards will turn you into a nimble, 
flexible web designer. So get out your sketch pad, and let's pre-produce! 


this is a new chapter 
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mark travels to japan 


Your first "iwterwatiowal" gig... 

Mark loves to travel. After college, he took a year off to backpack 
around Japan and experience everything the island nation had to 
offer—from sushi to samurai. Now that he’s back, he wants to document 
his experience. It's up to you to build Mark a great, engaging website 
detailing his trip to Japan. 



Mav-k 


Tiky 。 mct\ro map 
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pre-production 



<HOt| 

dlliii. 


Travel p"it*buv-cs 




\dcos 


VI 


Mark’s got a ton of content, and all we know is he wants a 
great site. How in the world can we make sure we build Mark 
something he’ll love, without wasting a ton of time? 


Ov"'»^aw> 


Hovu would you start building Mark’s site? 
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visual metaphors 


Thiwk before you code 

Pre-production is all about getting things right before you dive into 
writing XHTML and CSS. Its all about getting your site’s design 
right on paper. That way, when you get to the point where you go to 
code, you know exactly what you are building. For Mark's site, we can 
get our ideas down, before we spend a ton of time fitting text and 
pictures into a layout scheme Mark might totally hate. 

Pre-production is also about letting your user approve what you’re 
doing — on the front-end, when you can still make changes easily. 
There’s nothing worse than investing days or even weeks into a 
design and then finding out the client hated it. 


Start with a visual metaphor 

One sure way to get your site looking right is to figure out what the site is 
about. In other words, what is the site’s theme, and how can you express that 
visually? A visual metaphor takes advantage of familiar visual elements 
(likes images, interface elements, icons, colors, or fonts) and reinforce the 
site’s theme. 

Suppose you’re building a job posting site. The postings could be made to 
look like an actual bulletin board using a good visual metaphor: 



Jobs i\\c Will just needs -to be a 
simple job pos*tm^ s'i*tc. Oy\t Wur\ tolumir\ 
,s all you wed, maybe ^ some 
*rn sidebar. 



The -Pihishcd site the “job 

postihg boa\rd" mc-bphov- 

With C,or\c boav-d tcxtuv-c ahd Post- 

It havigatioh. 



DE51GW 




JOBS 




GCI¥ir 


Hr. 




Vii»- 


■vnlnT 


I m 






This Site i 讣’七 jus 七 a vi^rtual bulleim 
boavd …_七 anally looks like a 
bulletin board- 


40 Chapter 2 







































pre-production 


A clear visual metaphor helps 
rcmforcc your site's theme 

Suppose you’re creating a children’s online community site geared for kids 
ages 7 to 10. Visually, you’d want to use bright and bold primary colors with 
cartoony interface elements and fonts. These design elements reinforce the 
subject matter of the site: kid oriented, fun, etc. The look of the site actually 
tells you what the site’s about. 

A visual metaphor can range from subtle (using colors that give the user an 
abstract feeling that the designer wants to associate with the site’s theme) to 
direct (using graphics that tie right into the site’s name or identity-like using 
graphics of rocket ships for a site called Rocket Ship Designs). 



bold dolovs av-dtid 

theme help set the visual metaph 
tov- this site. 


Cav*tooy\ 

- book 

st/lc 

av-c dcVm'itclY 

■to'wavd a 






I ， ■ h a ：T ? 


Visual metaphors, themes, 
what's the difference? And I 
thought you said I should be 
designing on paper, anyway? 
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site themes 


, G li 






Silver back 


uMtanxihni 

ixtt*lk#Cy 

n^l d ^nnril^cKVT^-i 



m^rk 


S\|vcv-katk \s ay> a^l^at'oy. +ov- 

uscv tcstm^ v/Asrbcs. 

Because a £\lvc\rkatk »s also a 
J a“aU“ j—c ad —la 
七 Wc is used -bWou^out 

Unlike |doy>BuWct S*ilvc\rbadk's visual 
mciaphov is move apfav-cv>t They make 
七 he f>a^e look like a —ilia’s suvvou^dm^s, 
£.omflc*tc v/rth juy>^lc dolov* sdV>CmC> leaves 
i\\c -top of i\\t fay and a” amaz-m^ 1050/ 
*idor> oi 3 ^ov~illa y/rth S dl'ifboav-d- ^ti\tt) 
w ^ucv-*illa Wsabilrty Testm^/' V 


(dohBu^c-t d\rcatcs ahd sells idohs 
+o\r use ih web design othev- 
m*tc\r-Padc development l^ohs av*e 
-rcatuircd throughout av\d a takeout 

^Oh*|^ihC\r is used -to \rcih-Po\rdc "the 
sites hdme. 

I 乙 or>Bu*f*fe 七 ’s visual me*tafhov is 
sub*tlc-bu*t -the dts\^Y\ vem-fovdes 
-the dledy>> simple \tov\s they fvodude, 
ar>d ihciv I030 is a yea 七 literal 
一 m*tcv-fvc*ta*tioy> o-f 七 he srte’s y>amc- 


A theme represents your site、cowtewt 

The word theme is used to refer to all kinds of different things in the world 
of web design-—which can be kind of confusing. In this case, a theme is 
your site’s purpose and content. So, the theme of amazon.com is an online 
merchant that focuses mostly on books. The visual metaphor uses design 
elements (color, graphics, typography, etc.) that reinforce the site’s theme. 

Here are a few more good examples of theme and visual metaphor working 
well together: 
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pre-production 


l^rpen your pencil 


Take a look at the screenshots below. Write down the site’s 
theme and circle (yes, draw in the book) some of the design 
elements that are used in the site’s visual metaphor. Remember, 
a site’s theme is its content/purpose, while the visual metaphors 
are the design elements that are used to reinforce the theme. 



- = 








The Morning News 




Lwh. r!?ibi 


^rwaa ■ j 

KUIrr 


Mgr EUlrrA^ufliimil 


hiJIn 


• J^r^Bpiap 






I 

■ lannJH a i 


■ri vhIb 

■ mamm 




.k'p^i f #■ 

•mmm ㈣ i 


ffi im »*pr"i ■罕 

■laaiFi - 


fI - WFj 





you are here ► 


43 



































































identifying themes and visual metaphors 


^Sharpen your pencil 

Solution 


Your job was to write down the site’s theme and circle some of 
the design elements that are used in the site’s visual metaphor. 
What did you think the theme of each site was? Here's what we 
wrote down. 



Bite marks used 
七 Vie pay vcw'md you 七 
■bWis is a site about -food- 


丁 he 乙 olo\rs bv-ight 3hd 

u appcti 2 jhg. w 

ov-a^gc, 

代 4 fcadh—dolovs you ； d y/^h-t 
io 


Serious Ed*U is a -food website dhd 
bloo^. The Io^o a^d bi*tc nr^vks oh *thc 
^avi^atioh -tabs help v-c*m-fo\rdc *the 
-food *th\rou$hou*t *the 




The Morning News 



/\ mul 七 •一 dolunrm layoux- similav* *to 
a y>ey/s paper. Also, 七 he dolumr>s avc 
s*t3^cv-cd, y/i*th some spa^'m^ 七 he >wid*t^ 
of b^io, o*tV>cvs jus*t OY\t- 


The Mo\nr\*m5 News is a hcws-bascd 
y/cb imasazjhe. |*b 一 dolumh, 
hcy/spapcv-s-tylc layout a^d simple 
desi^h rem-fo\rdc *thc hews 



^ChCVous use o-p whitespace 

ahd a gv-id-based layout 
help vcih-fovtc "the 
hcwspapcir theme. 
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pre-production 


Pramstormiwg: The path to a visual metaphor 


Let’s get back to Mark’s site... we need to figure out the theme, and 
come up with a good visual metaphor. Not only that, but we want to 
figure this out without thinking too much about how many columns his 
site will need, or what sort of navigation Mark might like. 

Developing a visual metaphor is really all about brainstorming-spending 


Mavk ^37 be 7°' 


Wis site) s 



a^d boss! 



f Ma P °f japaw 

_ paNea| ^ 

The fr0 UeN palace 
japawe^e flag 

: r 3 ve lj 、 ⑽ 1 /tUg 

P ho t<> ^llcfe^how 


t U, 'r-« 

Ui— 


some time really thinking about your client ’s content, audience, and ‘ 
what visual elements they want to see on the page. And remember one 
thing: don’t discredit any ideas or concepts you come up with. 

Just write them all down... you can refine things later.. 


do^iY\ 

£.omCS bo your ri\\v\( 

Po^*t judjc an idcj 
until c^d- 


The b\raihS-tov-rh |is -(： 


CVCh c oW ahd \^a 


s ^tiohs ahd 

广 y . 




Sil 


Do a quick brainstorm for Mark’s site and write down any design, 
content or visual element ideas you come up with. Remember, 
write down everything-you can filter out bad ideas later. 
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from brainstorms to visual metaphors 


Pevelop a theme and visual metaphor for Mark 

Coming up with a theme and a visual metaphor can be tricky. Once you 
know what content you have to work with and have a few brainstorming 
sessions under your belt, it's time to start thinking about the best way to 
convey and display that content to your client's users. Color, layout, and 
element placement are all important factors when deciding the best way to 
reinforce a site’s theme. 

So once you’re clear on a theme, here's what you need to do: 


❶ 


Choose some color palettes 



pitk tolov-s y/ov-k well v/rth 

site. Use StrM\US like 

/kulcV" 3dokc tow> "to build 
palc*t*tcs ar\d see iiow 
dolors will v/o^rk 


The use o( i 


❺ 


❺ 



’ nc idohogvaphy, a^d text 

心 help \rcihWc the sites theme by 

site look like the 


Make layout dc6s"ioir\s based oy \ 乙咖七⑼七 ’ 

TViC more £.olum\r\S you V>3VC, {ht 

you v^avc -to Y\W AUo remember 
•bV^a-b y/Wrtesfa 以 is im forta 於七 . 七 
V^avc -bo -Pill every available 1 



Pesign layouts based on content 




Use visual dements to reinforce 
the theme f 


TW.S \s ^CV-C 70UV- J 

v,cl ? most Use voujr llS W CaS = 
u ? a-.s ? ia 7 如 U C I ? 

/ 70 UV srbe’s 眯 ㈣ 七 Wes" 



A visual itietapkor uses 
common visual elements 


(colors, louts ， icons, etc) to 
kelp reiniorce a site’s! tkeme. 
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pre-production 


( >en your pencil 



Write down two possible central themes for Mark’s site. Then 
come up with several design elements (remember, these can 
be fonts, colors, logos, icons, interface elements, etc.) that will 
contribute to a cool visual metaphor for Mark's site and reinforce 
his site’s theme. 








❶ Central Themes 


❺ Interface Elements 
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themes and site elements 


^Sharpen your pencil 

Solution 


Write down two possible central themes for Mark’s site. Then 
come up with several design elements (remember, these can 
be fonts, colors, logos, icons, interface elements, etc.) that will 
contribute to a cool visual metaphor for Mark's site and reinforce 
his site’s theme. Here's what we wrote down... 


|Vs ok ^ you u ? d’f ⑽七， 

Jus 七 … kc 就 c fideas a 代 m 4七 

/ ball^avk W a si-te on Ja?a»>ese twIW- 

❶ Central Themes 


❻ 


Japa^ -travel diary -travclc/s guide -to Japar\ 

Lrts emphasize the i\rip Mark -took, and 
what Japa^ was v-cally like. This dould also 
W 的 ou-t -to be a yrtai 代 sou … (or oihev-s 
a i\rip or tvavclmg -to Japan. 

Interface Elements 


ttcadcv ； vyi*tK large 


/l/Iavk -took yea 七 f*id*tuvcs. 
lV(C Y\ttd *to show *tiiCrw 


yyiap Japar) 

V ^eo^\rdf>hy is vcv-y 

⑽ That’s a fla^e whcv-c 
we taf\ use visuals a lot 


Oy\C^ r»\ 3 ih .>)c|yi^ 3 "tiph 


Simflidrty is key, ar>d Mar\c 
d 。 ⑽’七 V>avc *fcoy>s o( *tv*ips {p 
vedovd••• jus 七七 he oy\c- 



..Single, sidebar . 

simr»pliti*ty. Wc v-cally 
dohi have chough do^ic^i 
“II multiple sidebav-s. 


48 Chapter 2 













pre-production 


Your page elements shape your visual metaphor 


Once you have a general site theme and have started 
to think about what you want on your site, you need 
to consider where all your client's content is going to 
go. How you lay out your site affects your overall visual 
metaphor a lot... it dictates what can and can’t appear 


on a given page. For example, if you only have a single 
column, it may be difficult to make your site “feel” 
like a newspaper or magazine. But add a few more 
columns and you can make that page mimic the grid¬ 
like, multi-column layouts of your typical daily paper. 


sections sVbe. 


Used *bo sepavaic 

Ara^i 七 he eye io 
key far*ts o? 
pay. l/VV>i*tcsfadc is 
overlooked- 
I 七匕扣 bo*th help 

ar\d Ku\rt a dks 咖 . 


Foo*tcr 

A yrtai flate -fov- 
topyv* 吵 i m-fo 
I'mks. RcUY\i\^, 
-Poo*tcv-s V^avc 
used -fov C.oy\*tcK\*b like 
Twi*t*tcv- -feeds 
mavkuf validation. 


Sub Kavigatioh 

Links -fco 

withm mdih sc^iiohs. 


dcbar(s) 
Used -fov* Imks 
and aWillavy 

doyrbe 灼七 . 



TKis is y/hev^ 
the o-f 
七 k page goes 
is what 
isi-to\rs 

-Pihd. 
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page elements 


O 


Navigation is essential for 
users to get around your site. Design, 
placement, and the content of this 
element will help convey your sites 
theme in different ways. 


o 



Body content is where 
all the magic happens. This 
is where you put the stuff 
people are coming to see. 
Whether ifs images, a blog 
post, or a YouTube movie, all 
that stuff goes in the body. 


o 



Sub Navigation displays 
content that lies under a main 
navigational item. This is usually 
only needed for larger sites and 
more complex content. 


O 


o 



Whitespace (which is also called 
negative space) is the area between all 
the different design elements on your page. 
Whitespace helps to break up blocks of 
content, gives the users eye a little rest, and 
focuses the user's eye towards content. 


0 

o 
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pre-production 


The footer portion of 
your layout can hold anything from 
copyright information to duplicate 
navigation links. Users will often look 
to this section for links or content 
that can’t be located anywhere else on 
the site. 


Sidebars can hold everything 
from link lists to extra body 
content. They can also be useful 
for ancillary navigation and archive 
links for blogs. 



o 


ng o 

Dumb Questions 




Do I need to use all of these elements for every site? 


Nope, these are just examples of the general page elements you might end up 
using. Remember, each website is different. In all cases, your client's content (and their 
theme) will determine what page elements you end up using in your final layout. In fact, 
if you try to use all of these page elements on every site, you're going to end up with a 
design that doesn’t make any sense to you (or to your users). 




Does every site need a theme and visual metaphor? 


Yes and no. Not every site needs a gorilla-themed metaphor or a snazzy 
newspaper layout to reinforce its content. But in most circumstances, your site is 
going to have some sort of theme, even if it is only expressed through the content and 
writing on the site. Remember, content is a design element and can be used just like 
whitespace and sidebars. 

What if I don’t start with any content? Or I want to just start a blog or 
something really simple? 

Even if you don’t have any content (images, articles, videos, etc.) initially, you 
still need to make a conscious decision about the overall theme of the site. If you’re 
starting a blog, what kind of topics are you going to write about? If it’s more of a journal, 
well then there’s your theme. All websites have a theme, even if it’s just about you. 
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finalizing a visual metaphor 




To finalize the visual metaphor for Mark’s site, we need to look at some different color and layout 
combinations and see how they will work with our content. Check out the following layout and 
color mockups and write down your thoughts on how well each of them represent Mark’s content. 
Remember to think about the themes and visual elements you identified in the previous exercise. 





5--it,-■ 




Wtrt avc a ^ 以七价 CS 
d^a rtcw 



back -fv-om Japaw 
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pre-production 



Thircc—dolurwh si-fcc with 
simple, blue to\oY scheme. 


TVacii 七 ional "tv/o—dolurwr^ si*tc 
v/iih ca\rthy Color sdher^e. 
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finalizing a visual metaphor 



To finalize the visual metaphor for Mark’s site, we need to look at some different color and layout 
combinations and see how they will work with our content. Check out the following layout and 
color mockups and write down your thoughts on how well each of them represent Mark’s content. 
Remember to think about the themes and visual elements you identified in the previous exercise. 





These Colors doY\{, really seem 
*(x> -fi*t *thcir^e a Japanese 
*tv*avcl si*te. The pastels jus 七 

dor /七 work. 


single—dolurwh si-tes avc 
simple, this is " 七 enough spade -to 
hijhlijhi all ihc thai Mav-k 

has bv-ou^ht bddk -fv-orw his -tvip. 


The *tv/o - l3you*t should 
us voom, but *this dolov* 

still >wovk*m^. 




The ca\rtK {x>Y\ts arc hide, bu*b a 

little dark -for -the -theme. vJapan is 
dh island) so shouldn't see some 
blue m *thcrc? 
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pre-production 


A o( Japan v/ould look vcally 

good m 七 he hcadc\r. W\)CV\ a Visi-tov domes 
"to -the site, thcv-c v/ould be v\o doubi ds 
■to the "thence a^d o( the pa^e- 


This layou*t/dolor domb'md'bioh jives 
us all -the room we heed bo display 
Mark’s dorrteyrt. I 七 uses a simple 
dolor pale*t*tc *tha*t cr^fKasizjcs blue ； 

i*t’s pc\r-fcd*t sihde Jaf>dr\ is island 
ha*tior\. 


The blue y/o^rb well Vrtii the i\\t^ 
TV^c oi\\tr coWs a\rc move ^c^al 
a^d will alloy/ us to be ^v-ca*tWc 一⑼ 



Ma\rk. bloi OK>ly is 七 his dn •… 七 e\res 七 •_% 
look, i*t v/ill dllow hirw -feo pv*csc^"t lots o( 
m-Po\rr»»a-tio^ {p his usevs. 
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xhtml and css mockups 


Puild a quick XHTML mock-up for Mark 


Just because you’re focusing on pencil and paper doesn't mean you have 
to abandon XHTML altogether. Now that we've got some well-thought 
out ideas, let's build a very simple mockup of Mark's site in XHTML 
with some simple CSS to add color and formatting. 


Fire up your favorite text or HTML editor and create a new file: 


XWTML DOCTYPB 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns= n http :// www.w3.org/1999 / xhtml" xml : lang= M en M lang 
<head> 



<title>Mark in Japan</title> 


<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 
<link rel="stylesheet" href="screen.css" type="text/css" media= M screen" 


</head> 

<body> 

<div id= M wrap n > 

<div id= M header"> 

<hl>Mark in Japan</hl> 
</div> 


\ 


Lihk io ihe C££ f ile C，i 

wds -to be -the 
+oldcir as this 



<div id= M content-left"> 


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis 


nisi eget est viverra placerat 
</div> 

<div id="content-center"> 

<p>Nulla facilisi. Cras ac tellus 
</div> 

<div id= M sidebar M > 

<ul> 


••.</p> 


fringilla tortor iaculis</p> 

Du 咖 y -texi (well -fill \y\ 
Mark’s do 灼七⑼七 la"tc\r) 


<li>Fusce diam. Pellentesque bibendum. Nulla viverra vestibulum justo. 


Pellentesque pulvinar sapien.</li> 

<li>Cras vestibulum elit id nibh hendrerit eleifend. Pellentesque id ante. 


Sed volutpat blandit mi.</li> 

<li>Morbi at tellus facilisis augue tempor pharetra. Vestibulum porta 


condimentum dui.</li> 

<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 


inceptos himenaeos.</li> 

</ul> 

</div> 

<div id= M footer"> 

<p>Copyright &copy; Mark in Japan, 
</div> 

</div> 

</body> 

</html> 



all rights reserved.</p> 


| t > s a yod \dta ^ ^ 
a ov W, ^ 
act a look at 
s^lcs 
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And the CSS. 


We’ll need screen . css, too, a simple CSS stylesheet for displaying 
Mark's site: 

/* screen.css */ 

body { 

margin : 0; 

background: #112b63; 
font-family: Georgia, serif; 
line-height : 1.2em; 


hi, p, ul { 

margin : 0; 




padding : lOpx; 


All elements 

s^av"c same v-ulcs. 


ul { 


ul li 


padding : lOpx; 
list-style-type : none; 


margin : 0 0 lOpx 0; 
padding : 0; 


_Remove i\\t bullets -fyom i\\t 

ur\oV"dcv"cd list 


U 


#wra P { 0 ^ the whole Slit ih the kov/w. 

margin : 0 auto; 

padding : lOpx 20px 20px 2Opx; 
width : 880px; 
background : #0b204c; 
border-top : lOpx solid #091a3f; 


#header 


background: #ead9b8; 
height : 150px; 


#content-left, #content-center { 
float : left; 
width : 280px; 
margin : 2Opx 2 0px 20px 0; 
background : # f f f ; 


#sidebar { 

float : left; 
width : 2 8Opx; 
margin : 2Opx 0 2 Opx 0; 
background: #ccc; 



Both dolurwh <div>s 3hd 
the fdeb 狀 use "tk u -float ： 

dcdlavatioh -fco dv-catc 3 

dolurwh look. 


#footer 


clear : both; 
background: #ead9b8; 


Make su\rc footer displays 
belov/ doluwms. 
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final browser mockup 


丁 he Chd \rcsult wheh you \o\v\ 

the XttTML ahd CSS -P \rorh the 

previous two pages. Still bav-c-bohcs 
bdsul ; but it will give Al^v^k s 

good idea of whc\rc we av-c headed- 


^ o n 


Marie in 


Mark in Japan 




0 


Q 



Hmmmmm... I don’t know if I like the 
whole three-column layout thing. I was 
hoping for something a little simpler. You 
know ： header, footer, one sidebar, that 
sort of thing. I’d also like to see some 
detail. I really can’t tell what you guys are 
going for here... 




sh ^uiieLp 
cing eliL 
\sl CfiCt CSt 
tincidont 
mine. Nuilam 
it magma. 

&ed purus eu ante 
niaLuTKltsiiie ill hid. Vivaiirnii 
hihenrlum nnn nisL Hed porta ， 

clit congoc rhoncUiS coascctctucr. 
nulla risus feucibus meULS P a 
iDlerduin purus jus to at ligula- 
Siispenclia.se pntp.ntL Apnean purus 

juauris, 6t. varkis et,^ 

vKiucula. vbIj insiisa-. Iii purus ip^utu, 
jiiirfnr Mt ameJ f tempiis ftp 〜 fe.mpiiA 

non, acm. Douce Ico. Crtis justo 
niuiCj vulpulitl^ Eilj IrisLiti^ tilp 
tacilisis sit amet, arcu. Curabitur vei 
pede nee nibh eondimentum 
consecteuier. 


Nulla fadlki.Crd3 

tortor iacuiis rutr 
lobortis pcdc. Nqj 
a tineidimt polvin 
aliquot magiia f eu 
nrr.i sit ame.t null 
Pellentesque ultr 
nielua. Ul ai: Miss 
pharstra hfmdrer 
clit. Suspcndissc 
arcu. Phasellus n 


Duis accuiusan, 1 
sagUti' nsiistnr 
tristiQue nisi ipsi 
Null^in la.ur«tiL.! 
libero nPf l 131 
Donee ttccumsan 
Maeceniis waJii 
Pellentesqae cot 

metus. Fusee so] 
pidvinar euismo 
egealsiii nulla, 
masfla vestibnliii 


Copyrisiit © Mark in Japan, all rights reserved. 




58 


Chapter 2 













pre-production 




C&oflle 


s ac 1 tilluia friugUlu 
uni. Sed hendrerit 
m nitrides, mauris 
Lar, aufiue elit 
l porttitor diani 
a. Qnisqne. elit. 
icses. Aeneaa 
aL i nsiuns 
it, Nam sit 
pretium gravida 
itnim porta lectus- 
igula isi bendrerit 
pis nitnim erat, 3f. 

nm. non turpi&. 

quis 

p. volntpat pharp.tra 
i vcncnntis puius. 

: [lenluni. 

isequat pede non 
Lliestudin, nunc ncc 
d. neque enim 
wugiiE? felii 
m m^?Lsa. 


Fujacti diajii. PellsiiteiiyftiK 
bibendum. NuUa viverra vestibi^iiiia 
juato. Pcllcntcsquc pulvimr aapien. 

Cras vestibuluni elit id nibh 

hendierit eleitend Pelieatesque id 
ante. Sed volutpat Waudit nii. 

Morbi at tell us fadli&i 弓 augue 

tempor phare tra. VesLiboluni purla 
f^nudi mp.nf nvn fliii. 

Class 叩 tent tadti socdoEQU ad litor^ 
Lorqlimit per wjuubia nostra^ ptic 
irtrsptn-s himftnap.ns. 


What!? Are you kidding? I 
thought the whole point of all 
this pre-production stuff was to 
get the client something he'd 
like right away? 


o 
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saving time with storyboards 


Ok, it’s clear that Mark isn't really 
happy with our design, and we have to come 
up with something different. So now we 
have to throw everything away and start 
over. This sucks... 


o 



Joe ： Can't we reuse some of the work we’ve already done? 

Jim: What, built another XHTML page using our theme? 
Then we’ll be right back where we started... and Mark still 
might not like what we come up with. 

Frank: But it’s like you just said... we still have a theme that 
should work. And I don't even think our visual metaphor 
has to be totally scrapped, right? We just need to show Mark 
some different variations. 

Joe: What about Photoshop? We could build the sites there 
and show him PDF versions of the designs. If he likes them, 
we already have a leg up on the visuals and imagery needed 
for the final sites. 

Jim: By the time we finish a handful of comps in Photoshop, 
we could have done them in XHTML and CSS, too. That’s 
still a ton of work. And what if Mark doesn't like those, 
either? 

Frank: What if we just draw some ideas out on paper? We 
can sketch our site ideas, add a little color, and send them 
to Mark to get his approval. If he doesn’t like them, we can 
draw some more. That shouldn't take any time at all. 


Jim: Hmmm … and because they're on paper, Mark could 
draw on them too, giving us a better idea of what he’s looking 
for when he doesn't like something. 

Joe: You know, this could work. So we can reuse our theme, 
but deliver two or three different designs on paper and give 
Mark some nice choices. I like that... 

Jim: The drawings don’t have to be really detailed, either, 
right? They just have to give Mark an idea of what his 
finished site is going to look like. 
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pre-production 


Use storyboards to develop ideas and 
save time without code 


One of the most important things in pre-production is the storyboard 
(sometimes called concept art). Storyboards are used to visualize your design 
in its entirety. They give you a chance to see how colors interact with one 


another, how interface elements play off one another, how your navigational 
system looks, how your visual metaphor plays out, and whether content is 
represented in the best way possible... without getting into code. 

In fact, storyboards are like another level of brainstorming. You already did 
some brainstorming on the theme... now it’s time to brainstorm your visual 
metaphor and design element ideas. 



HTML 


祕 ：— atod .dea 
so ea 十吵 n 
a JfW all... ^ V>a6k 



Poh be a-P\raid "fco wiri-tc ov\ youv* 
bo3\rds. /V}3\rkih^ 'blicrh up is 

designs oh papev-. 






/\ bds '16 “d - s*to\ryboa\rd tav\ 

a detailed website. 



Try creating your storytoarcts in a 
pkotocopy oi an empty browser winctow. 
Tliis is a great way to give your client a 
context lor your ideas. 
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you f re not designing for yourself 


O 


Okay, even if we used storyboards, 
Mark still wouldn't have liked our design. 
So how can we make sure he likes the 
next version we come up with? 



Pow't design for yourself! 

Remember, when you’re designing for a client, it isn’t 
about you — it’s about the client’s needs. And taking 
the client’s needs into account obviously starts as early 
as storyboarding. Getting your client (that’s Mark, 
remember?) involved in your design process could be 
as simple as sitting down for a meeting, having them fill 
out a design survey, or sending them early storyboard 
designs throughout the pre-production process. Not only 
will this allow you to build designs that your clients really 
like, they will be appreciate being involved in the process. 

We came up with things that we liked about Mark's 
content, but maybe we should have asked Mark what he 
wanted out of his website... 
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pre-production 




What did we do wrong? Based on Mark's thoughts above, 
how would you change the ideas we came up with on page 
54? What would you keep the same? 
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creating a storyboard 


Lefs create a storyboard for Mark 

Let's build Mark a different version of his site, on paper. We know a 
lot more about what he wants, this time, too... a logo, two columns, 
and lots of space for content. 

So get out some paper. Here’s what you need to do: 


O Find some paper and make a grid 


Grab a piece of paper (8.5 x 11 is perfectly fine) 
and sketch out or fold the paper to create a grid. 

You might even want to use a piece of graph 
paper, which has the grid built right in. A nice 
grid provides a way to line up elements when you 
are creating your storyboard. Grids also provide a 
foundation that allow you to lay out your site so that 
things line up, appear ordered and well-organized, 
and make sense to users’ eyes. 



\A/cll talk a \oi 
move about m 


Y°^ ^ use a phhtcd 
bbhk b\rowsc\r {o see how 
the site would look with 
wihdow dliv-omc. 




❺ 


Sketch out your design 


Here’s where you get let out your inner 
design geek. Layout your site, and sketch 
logos, images, and anything else that 
comes to mind. All of the site’s text 
can be replaced by lines or a box 
with the words “text appears here . 55 
The point of the storyboard is not 
to see the actual content-it’s to play 
with and finalize the layout. 


Po 匕 us oh major ^o*t 

slo^drts o\r Tmks. Jus*t jive youv 
dlicrrt a basi 匕 idea o-f si*tc- 
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pre-production 



Wcvc is what the 
sto^ryboav-d looks like 
with b\rowsc\r Avome. 

This is the P oi，t i, yrouss whe^e you ,ced b> show the 

you, wo,k. ^ive two, ^aybe 仏叫 options a,d 

y thwto — as ⑽仏 ^cdbad as Possible 
dv-aw'mg oh therw i-p heed be). 



ExeRciSe 


Sketch out two storyboards for Mark. Make sure that each meets his needs, but are different 
enough to give him a choice. 


O Add color and finalize your storyboard 


It's pretty important that you add color to your storyboards — color changes 
everything. So break out your pencil crayons and add color to your storyboard. 
Even though your favorite shade of crayola blue might not be web safe, your 
colors should be close enough to see how they play off of one another when your 
idea goes digital. When you are finished with the colors, fill in any missing details- 
and Voila! One supremely awesome storyboard! 
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the final storyboard 



|/Ve fut stov-yboav-d m d 
bv*oy/scv*> so /^l3v*k £>ould y 七 a” 

idea iiow i\\t -f misV^cd site 

y/ould look oy\ sC.v*CCi^* 


This is great! I like 
the simple layout, and the 
map of Japan in the header 
is perfect. Can’t wait to see 
the finished design. 卜 




tJiereiare no o 

Dumb Questi 9 ns 


HevVs a^o-thc\r design wc did, 
but Alavk didr /七 like "this 
one. S 七 ill, _ 七 only -took about 

如 hou\r -to put "toythev- b^io 
■full—fi.olo\r s-feo\ryboav*ds. 


Can I use Photoshop or another 
image editing program to do my 
storyboards? 

You can create your storyboards any 
way you want. The whole idea is to mock- 
up design ideas as quickly as possible, 
though. Photoshop will inevitably give you 
more control and detail, but might take you 
longer. However, having digital versions 
of your designs, whether you create them 
in a program or scan your sketches into 
the computer, will allow you to quickly 
email ideas to your client for review. In the 
end, do what you’re most comfortable and 
efficient with. 


Why can’t I add text to my 
storyboards? 

Text (content) really isn't that 
important during the storyboarding stage. 
Your main focus should be on large layout 
elements and possibly color schemes. 
Your text will come later, after you 
design your navigation and information 
architecture. For now, just put dummy 
text-sometimes called Lorem Ipsum 
text-or thick lines that represent text. 


What is the best way to add 

color? 

If you're hand-drawing your boards, 
colored pencils work the best. They are 
cleaner and more detailed than markers 
and won’t bleed through your paper. If 
Photoshop is more your style, then the sky 
is the limit. 

Either way, the point is to keep things 
simple, and represent how the site will 
look when it's online. We'll talk a lot more 
about color in Chapter 5, so don't get too 
hung up on color right now. Just do your 
best, and see what your client responds to. 
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pre-production 



■ 


When you pre-produce a site, 
you are able to try out design 
ideas on paper-thereby avoiding 
potential mistakes in coding 
which could cost time, effort, and 
possibly money. 

A visual metaphor leverages 
visual elements (images, icons, 
colors, or fonts) in order to 
unconsciously reinforce the site’s 
subject matter. 


Your Web design Toolbox 

You should have several 
storyboards in place and a 
nice array of design techniques: 
themes, visual metaphors, and 
storyboarding. Next up: going digital with 
an approved storyboard. 





■ When applying a visual 

metaphor to your site, be subtle 
and don’t overdo it. 


Storyboards are hand drawn 
concept art storyboards that are 
used to visualize your design as 
a complete entity. 
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3 organizing your site 

u So you take a left at the 

考 green water tower … \ 


A little shaky on your site navigation? 

When it comes to the Web, users are impatient. They don’t want to waste lots of 
time looking for the right button or wading through three levels of your JavaScript 
pull-down menus. That’s why you’ve got to spend a lot of time getting your site’s 
organization right... before you get into construction and design. Last chapter, you 
came up with a great theme and look for your site. In this chapter, you’ll really amp 
things up with a clear organization. By the time you’re done, you’ll have a site that 
tells your users where to go and keeps them from ever getting lost again. 


Ted, honey, you don’t have 
any idea how to get to 
Margies loft, do you? 


Look, how hard can it 
be? There are signs 
everywhere, and I know 
exactly what Tm looking 
L. for... I think... , 


this is a new chapter 








looking closer at content 




/Vlav-k v-cally I* 

—kvtY 。{七 r 
s-bov-Y^oav-d W“ 七 W 
W.m rn tv>c last Aa? 七饮 . 


科 n o 


■ 0H 
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organizing your site 


Fit your cowtcwt iwto your layout 


On his voyages throughout Japan, Mark collected a lot of material. He took pictures, 


kept a daily journal, collected items (maps, travel booklets, trinkets, etc.), and even 
managed to take some video. The big question is, how should all of this content be 
organized into his new design? 



layout ^ V 


仏 CSC V>_rU 


do 






mm 


' bua 


■ “: rail 


% JL 

"- mmL mi^m= 
nj— 2 * _ ■ 
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organizing your site’s information 


Organize your site's iwformatiow 

A website is all about communicating information. No matter how good your 
design is or how cutting edge your layout is, if your site doesn’t speak to your audience, it 
won’t be nearly as successful as a site that says something, and says that something clearly. 


A huge part of how well your website communicates its content has to do with how its 
information is organized. If a site’s content isn’t organized well, all sorts of bad things 
can happen—like confused users leaving your site for someone else’s. Organizing your 
site’s information well (and logically) is the difference between good and bad navigation- 
which means the difference between your users finding what they want quickly and easily 
and your users being really confused. 


Sharpen your pencil 




Let’s explore how the organization of a site’s information can 
impact navigation. Take the chunks of content below and place 
each of them under the top level navigation category that you 
think they are best associated with over on the right. 



Take -bV^csc ton-ten-t 

ta-tcjov-ics you *tWmk 
A belo 呼 Vrbiv 
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ambiguous navigation 


■^Sharpen your pencil 
、 Solution 




So you needed to take the chunks of content and associate them 
with the most appropriate top level navigation category. Here’s 
what we came up with... what does your solution look like? 


/\/Ied'id is usually fidWcs 
and videos, bu*t “Menus and 
l Cuvvcir>dY W v/ould^*t be ou*t o( 
la^e hcv-c. Besides, -tiicy av-c 


I 1 ■ I My Notes 1 1 | Memories 1 1 1 Media 1 

[Sd || 「_ I II III M_ ■ 


I Pla r | i | _ I 


I 


丁 his is rwov-c {o 

help people oui while they av-c 
t\ravcliir>j \y\ Japan. 


'/\ZlcmoV-*iCS W IS sli^vtly 
dmbi^uous but >s s*till 
a ^ood f la “ -fov- 
Mavk’s pos-t tav*ds 

a 灼 d some fiio*tos. 


I Currency 1 
I Collection J 


pho-tos 
，Mlly dould go uhde^ 


^Icdia/' -too. 
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organizing your site 


These categories suck. 
Why aren’t menus under 
Tips A Travels? 


Ambiguous navigation confuses users 

Thinking about what to name your main navigation 
categories is important and should not be a last-minute 
decision or an afterthought. Confusing categories will 
make it difficult for your users to find the information 
they’re looking for and make your site look unorganized 
and haphazard. Let’s take a closer look at Mark’s top 
level categories: 


雜 ㈣ ： 

the hotes about? Travel? Food? 






M— 乙 a 七 ― a cs ? e^allv Jag 

oy.es, makes CoysWsx^ Oust 

because sounds ^ood } 

docs^-t ^ usevs Will 奶 ded^d 比 . 


"the usc\r expert 
"to *fihd ih u A1crwoV"ics ；； ? 
PhoW l/idco? Shouldh^t 

those be uhdev- u A1cdia >； ? 


'Media” is〆 七 a bad tKoitc (or a 
daiegovy, but you fu*t youv 
piio*tos ur>dcv W Mcmov'iCS, W W A1cdid 
suddenly yb sort o-f dov>-fus*m^ 


Sharpen your pencil 


Go back to your solution on the previous page, and write in 
better, clearer category titles. You may also need to move around 
the chunks of content to match your new categories. 
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better navigation headings 


^Sharpen your pencil 

4 al«tt 5 fr 


better Solution 


Having clear top navigation categories is the key to making 
information easier to find on your site. Let’s see how some new 
main categories makes our organization more logical. 




To avoid to^us'iov>, wake 七 Vus 
ov\t ta 七 




Merwovies” is a little 
▽aye. Let’s use w Souvc^ivs , 
i^s-tcad- It’s and 


r>dcv-s-ta^dablc. 


I IE, |i|^|!|S|!| Media I 

I Travel Tips |, | Piary | 

回:曰:曰: E 3 

曰:固 

I I Photos 1 1 I Menus I 

: l ’ ! I t 

He -types V j 

d 从 at w»ll “PhoW’ beings w /Wcdia w is a 9 ood 

und V^cv-c. ⑽ d 饮 media how. 


Travel TV’ U 刷 a I'iUIc 

amb’ous, W 七 vUI 赠 k 
汐心仏 c option y/c V>avc 
Wi-bV) Mark's cov\it^ 


Mcdi3 is a good ta-tejov-y, 

bu 七 w Cum^dy Collcdiio^ a^d 
Alc^us belo^ m Souvchi\rs. 
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theretare no o 

Dumb Questions 


How long is too long for a category name? 

In a perfect world you’d be able to find one word that 
describes all the content a user would find under a specific 
category. Unfortunately, that’s not always the case. A good 
rule of thumb is to keep your category names short (one to 
two words), free of jargon, and as close to describing the 
content as possible. 

Q/ But I know what the link means, isn’t that all that 
matters? 

Actually, that doesn’t matter at all. You aren’t building 
a site for yourself; you're building a site for your users. 

Your number one goal is to make information on your site 
accessible and easy to find by your users. If visitors can’t 
find what they came for, it makes no difference if you can. 


Navigation keactingfs skould 
always te skort, concise anct 
reilect (as closely as possible) 
tke content tkat a visitor will 
iinct wken tkey click tke link. 


How can I tell if a category is ambiguous? 

A- 

Sometimes spotting category ambiguity is as easy 
as asking yourself if a user or visitor would understand 
what your categories mean without any background on the 
content or topic of your site. In some cases, it's not that 
easy, and you really have to step back and think about your 
content as a whole. If you have information on your site that 
loosely fits the theme or might be slightly extraneous, your 
category names will reflect that and won’t immediately click 
with the user. This is why thinking hard about your content 
before you choose your categories is so critical. 

What if I have content that fits in two different 
categories? 

Most likely, content fits into different categories 
because you haven't done a good job defining those 
categories. Content should only appear in one place on 
your site. Come up with five or six good categories, each of 
which is different enough that there’s not a lot of overlap. If 
you're still having trouble, you may want to try a card sort. 

What’s a card sort? 

Good question. Keep reading... 
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You know, rm not sure this 
new content organization works. 
It still feels disorganized to me. 



Jim: I actually think the categories are ok. This is what Mark gave 
us. Shouldn’t we just go with it? 

Joe: The organization isn’t the best, but I think users will be able 
to find their way around. The headings are still a little confusing, 
but they’re an improvement over the originals, and I don’t think 
they’ll get any better. Plus, I want to start coding. We shouldn’t be 
spending so much time on something as trivial as categorization 
for a travel site. 

Frank: But this is the foundation of our navigation! 

Joe: What are you talking about? 

Frank: Our navigation... isn’t most site navigation just putting 
links and sub-pages to good categories? 

Jim: I hadn’t thought about it like that. 

Joe: Well, what else can we do? We’ve already done one revision 
of the categories — or navigation, I guess — and like I said, it’s not 
going to get much better. 


Frank: I think we’re too far into things to really know what 
problems we might have. 


Take your time witk 
organizing your site. 
Navigation is tuilt on 
your organization*.* anct 
notocty likes confusing 
navigation options. 


Jim: You mean, start from scratch? 

Joe: Oh brother. We’ll just end up right where we are now! 

Frank: What if we don’t just start over? What if we approach 
things in a completely different way? 

Jim: Like how? 

Frank: Let’s build up an information architecture, not just a 
bunch of categories. 

Joe: A what? 

Frank: Information architecture. Here, let me show you... 
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Keep your site organized with 
mformatiow architecture (IA) 

Information architecture is just a way to organize the content you already 
have into groups that are meaningful and logical both for you and for your users. 
Sometimes thinking about navigation, or categories, gets you too far into how a site 
is going to look. 


Information architecture is all about taking a step back and really looking at what 
sort of content you’ve got... how does it all fit together? Take a look at this partial 
IA for a popular paint manufacturer, Krylon: 


^|y/ays ^ivc youv- IA a 
■trtle so you kr\ow wha 七 
S*»*tc you a\rc y/ovk'mj 


The -fiv-st W |aycv- W ih-Po\rrr>a-tioh 
\rcp\rcschts the 

headings that rwight fcvchtually) 

bcdorhC you\r maih havi^aiioh. 


The dor\*bcr\*t £.Viur\ks 
»*b ur\dcv- *tV^c 

乙 ould tv\d uf 3s 
sub-^avi^atioir\ ov- 
乙 ould be Coy\{,cy\{, 

VrtWm a pay. 


I * —T 一一 rrnn -「一谓 „ mnrn . 『 Tr IW^ 



mMl MWCHim ffOJECT IDCAfl EMftK? sjy nLun 





Cpdifa ■) Jb h « 





LyuT^ih£ 

■ h fi n ij" I 
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card sorting 


1 A-Thc card sorting way 

How exactly do you organize your site’s information? Well, there are lots 
of ways. One of the best is something called card sorting. 

Card sorting is a cheap and easy way to impose a structure on your 
site’s information. It’s also a great way to see how other people (maybe 
even your potential users) organize your site’s information. Card sorting 
also takes a step back from XHTML or even the Web in general and lets 
you think about organization, not just navigation. 

To run a successful card sort, you need: 


O 

❻ 

❺ 


A stack of 3x5 cards 

A pen and a clear table surface (or the floor) 
A solid idea of your site’s content 


eadV> dav-d a 
sV>ov-*t, dcsdv'iptivc 
This should 
rc-flcd-t c%ad*tly 
y/ha*t 七 he 

o( doy>*tcir>*t IS 

about 


Octhit a ^ U 
_ of 6 士七 7 - W 
cWtM Y/aA Oh 从 w s ，七 c . ■ 


Food Motes 

Motes about all the food^ 

restaurawts on my trip. 


about 70 U 50 batk -to so^r 
63V"ds U*bcv*. 


F ^k Hyatt Tokyo 


㈣ 職 


方巧 about 



l/Vc like *to use yellow mdex. 
dav~ds ； hov/cvcv-, youv basid 
y/^*rtc, I'med dard Will >wovk -fmc 
-too. Use ad 七 ually - jus 七 

make suve you da 灼 oy \ *i*t- 
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Cavdi Sovts 

This week’s interview: 

Getting Organized with Card 


Sorts? 


Head First ： Thanks for being with us, Card Sort. 
Glad to have you. You talk a lot about helping people 
organize their information, why have you been so 
successful? 

Card Sort ： Well, first of all, I think the main reason 
I help so much is that I just get people to write down 
all their ideas—good and bad. This way, nothing is left 
behind, and you don’t end up in a situation where 
you’re trying to squeeze content in at the last minute. 
Second, having the ability to physically move the 
cards around helps you visualize different scenarios 
for your content. 

Head First ： Is moving things around really that 
important? Seems like it might be a little trivial. 

Card Sort ： Not at all. It’s probably the most 
valuable attribute of a card sort. It takes no time 
at all to completely rethink your content and 
navigation. Plus, you can have other people do the 
sort, too, and compare their arrangement to yours. 

Head First ： Wow, I never thought about that! Do 
you always have someone else do a sort? 

Card Sort ： Most of the time. It really helps to have 
a second opinion on things. Usually, having someone 
else perform the card sort leads to a content layout 
that you never would have thought of on your own. 

Head First ： Very cool. If I could, I’d like to go back 
to the cards. What exactly do people put on your 
index cards? Is it just random ideas, or is there some 
type of template you follow? 


Card Sort ： Well, I wouldn’t go as far as saying 
they’re just random ideas. You need to think of my 
index cards as content chunks—bits of information 
you want on your site. For example, if someone was 
building a personal site, their cards might include 
things like: “jobs,” “hobbies,” “family pictures, 5, and 
“vacation.” The cards can also be more detailed with 
terms like: “soccer,” “Disney World photos,” and 
u Grandparents.” 

Head First ： So the cards can be specific or more 
general? 

Card Sort ： Yeah, because some may end up 
as category headings and some may end up as 
individual content chunks. The main goal is to get 
every conceivable content idea out of your head and 
onto the cards. 

Head First ： Ok, this is making more sense 
now. One last question about your cards. Are the 
descriptions really necessary? 

Card Sort ： Not always, but they’re good to have— 
especially if you have lots of cards. You don’t want to 
run into a situation where you’re trying to remember 
what you meant when you wrote down a content 
chunk. More of the getting your ideas down on paper 
methodology. 

Head First ： That’s great advice. Well, we’re just 
about out of time. Thanks for talking to us today, 
Card Sort. 

Card Sort ： No problem, thanks for having me. 
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creating cards for the sort 



Its now time to do a card sort based on Mark’s content. On each of the cards, write down a 
single chunk of information and a (very) brief description. Try to be as precise as possible. After 
you’ve filled out a card, set it aside-well come back to these cards in a bit. Continue doing this 
until you’ve got all of the possible content from Mark’s site written down on the cards. You may 
need more cards than we provided, so use your own index cards if you need to. 



㈣ 工⑼:： 心 

-to 七 touvvbrY* 
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Mav-k bou^vt a v*ail pass and 
-tvavclcd all ovcv Japa^- ttc 
v*is*i*tcd Tokyo, tt'ivosiiima, 
^yo*to dv>d YokoKama- 


Food was oh Ma^s ^ihd 
… os*t o*p his "brip. He b\rougli-t 
bddk 3hd "took lets o-p 

ho "t^s about what he ate- 


.yk t)ok video Wi-tV) Wis ^ 
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Don t te afraict to make lots oi 


carets* For now，just get all your 
content down on tke cards. 
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content cards 




Mark had lots of content. Here’s what we came up with. Did you think of anything else? 


Exercise 

SotuiloH 


TW»s touia fectomc a W 05 0 V 七 
be a ^ood V^ad ”， 


_ 七七々 
tow^lc 七 e WrbhovA 七 

lo*bs <Jc iw^cs? 


landscape Photos 

Pictures of cities, woimtaiiis 
and otb^r places in Japan. …. 


Travel Vigny 

. . 

Mark J s mes about Japan 


to 


Restaurant Menus 

A collection of menus Mark 
picked i/p from 

^rbi/Vid fhe cbi/Mtry. 


Video Clips 

Short clips of video Mark took 
with his digital camera. 


v/ou — 七分 / Mark aic W.s 
Y/av *tWou# Japan. Co” 七⑺七 

about -food *s dcf ^ l ^y 
wta 灼七 * Mavk. 



Activities 

_ 馨 • 參 •••》»• 

Notes aboat the daily thi™ 

Mark did m Japak 


Tokyo 

Mark visited the Tokyo Tower 

aKid got u|) 以心和如 f 。州匕 

fish market. 


Sushi 
Markus favorite food 

^bout eating sushi. 


丁 his is a rr>o\rc spe^| 
bu*t suslii was impovt^h't 

pa\rt o-p Alavk’s tv-ip. 
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organizing your site 



Sihdc /Wav-k v-cally 
liked food, wc 
up with several 
+ood-\rclatcd 

乙 Uhks. That lets 
us b\redk tliih^s up 
3 lot rwo\rc. 


Food Notes 

Notes about all the food and 
restaurants Mark visited. 


/\dvitc a 灼 d msi^t about 

*tv"3vclm^ *bo 

Travel 

• 么 避卜 , 


Culture 

the diffe_e . 
Acmericaw awciJapawesc 

cuHu^- . 


Uaming Japanese 

Japanese language 
lessons for Mew travelers. 


?ars and Nightlife 

A look at the bars and 
nightlife in arid arbuiid Tokyo 
and Kyoto. 


Hiroshima 

About the trip to the site of 
the A - 多 owb: 


People Photos 

朽 c 切 res of people and friends 
that Mark met along the way. 


/Wav*k visited sor^e of JajWs 

州 ost -famous Cities. Wc 〜uld 

probably have a ca^rd -fov 
CdA rvtdjoir 


I Vs okay i-f you\r a^sy/cv-s av-c di-f-fcv-c^t 
_ be usrng -these ^3\rds *m \rcs*t 
o-f *t^C 匕 hap*tc\r, bu*t youVc v/ckorwc *to 
use youv ovm, -boo. 
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organizing your cards 


Sort your cards iwto related stacks 

Once you’ve finished filling out your cards, you need to sort 
them into groups. The cards in each group should obviously be 
related—and their grouping should make sense to you. Here’s a 
little hint: These groups will eventually become sections 
within Mark’s website. 


Cul-tu\rc and seem 

"to 30 \y\ hdnd. The tv/o 

Gvds should dc-Pmi-tcly be m 
七 he sarwc sta^k. 



Culture 

the difference beWeew . 

cu _. Truing Japanese 

Qi/ick Japanese language 
lessoMs for Mew travelers! 

These 啪吵七 3 。』 ” 

an u Abou-t 

ta 七 cy>v^ … 



Group the cards you made on the previous page into logical groups. Don’t worry 
if you have leftover cards—well deal with those in a bit. 
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organizing your site 


ftive your stacks names that arc short and descriptive 

After you’ve created your groups, it’s time to give each group a name. The name has to 
be short and descriptive. These descriptions may end up becoming part of your main 
navigation, so keep them focused on the content, but broad enough to contain the 
content they describe. 

Since you’ve already spent some time digging into Mark’s content, try and come up with 
category headings that are different (and better) that what you came up with earlier in 
the chapter, back on page 76. 


Look at the stacks you made in the previous exercise and come up with short, descriptive titles 
for each stack. You can use an existing card or make a new one for the description. Write your 
new cateegory names in the spaces below. 



Take a picture ol kow you organized 
your carets. You can reierence tke 
picture later and still move your carets 
around into ctiHerent arrangements. 
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choosing category headers 


麟 . 


Exercise 


In this exercise, you needed to organize your cards into logical “stacks” and then give each a 
name that best represents that content. Here’s what we came up with: 


l/Ve like usrnj dnolher dolov- -Pov- 
七 he Yo[a do 灼’七 hdve 

"to do 


c 


Media 


landscape Photos 

Pictures of cities, mouiitaii 

ler places in 4apati| Video Clips 


Short clips of video Mark took 
with his digital camera. 


^eople Photos 

Ictures of people _ 

^ Mark wet along the way. 


Restaurant Menus 

A collection of menus Mai 
fro»M various 
eateries around the counii 


Sushi 

. 

M ark > favorite food 

sushi. Notes ayid 
aboi/t eatfwg 


Food Notes 

Notes about all the food and 
restaurants Mark visited. 


Food 


“s ta\rd does〆 七 seem -fco -f i-t 
anywheve … well dome badk -fco ^ 
•_ 七 a bi 七 la-tcv. 、 


TV^csc seem V«kc obvious 6W^ks 

U a “， a 

v/ould b> botV^ 

^o-kos a^dV\cvc- 

Seems like wc have quite a bi 七 
o( -food-v-claicd dhur)ks. This 
^ould r^akc -Pov- ^y\ m-tev-cstmj 
scdiioir> o-P -the si-tc- 


Activities 

. . .. 

砷 。# fhe things 
Mark did rii Japan. 


88 Chapter 3 








































organizing your site 


Tokyo 

Mark visited the Tokyo Tower 
aVid got up early to go to the 
fish market. 


Hiroshima 


I rip to the site of 


Travel 

to and 

Travel l ^ Ja « 麵 

Mark's woi 

while ridmi 
—d from d(_ 

Wog / Piary 



Hn and Nightlife 

A look at the bars and 
wlghtfife in and around Tokyo 
and Kyoto. 


dul-tu\rc 


a\re 3 灼 ide -Pi-t. |s 七 his 
chough b> justi-f 
whole section, 0 


though? 


Culture 

the difference beWeew 

^^^a^apa.ese 

culture， ■ learning Japanese 


About Japan 


This rwijhi be good (or a blog 
ov ov\[\y\C diav-y. 


A^oihc\r ovpha^cd card：. 
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orphaned cards 


J. Hold on a second. Ive got a 
[ bunch of cards that doiVt fit 
O V into my groups. What am I 
\ supposed to do with these? 


Orphaned cards force you to ask yourself: 

“Is this content really necessary?” 

In some cases, you’ll find that cards don’t fit anywhere—these are called 
orphaned cards. You might be wondering whether you’ve done 
something wrong, but don’t worry. These cards are usually a sign that you 
are doing something right! 

Orphaned cards come in two flavors. You can have orphaned cards 
that didn’t fit into another pile; however, you think that the content is 
important enough to your site that you create a new group with your 
single orphaned card. Then there are cards that don’t fit into another pile 
but are so different from the other cards that you couldn’t come up with 
a group if you tried (let’s call these the really orphaned cards). Including 
orphaned content that doesn’t fit into your site’s information architecture 
always results in confusion for your user. 

What if, for example, the produce section at your local grocery store 
had a pile of toasters, a large display of beef jerky, and an entire wall of 
deodorant? Shoppers would get amazingly confused. We interact with 
the world around us based on the predictability of things. There is no 
reason whatsoever for deodorant (or toasters and beef jerky) to go in the 
produce section. The same holds true for the organization of a website’s 
information. If random content appears in a section of the site where we 
never assumed it would be, we’ll be confused—and our experience with the 
site will be negatively impacted. 

So, what do you do with orphaned cards? You’ve got two choices. 
First, you could change the content in such a way that it fits into another 
one of your groups. However, more often than not, that strategy just isn’t 
going to work. The other alternative is simply to recognize the fact that 
the content doesn’t fit into your website and toss it out. 



do ^ ^ 

从 CSC 6ar , , _____ 

I Activities . 

va^c? Too syco I ； Notes about the d 这 ily 

、 Wark did in Japan. 


?ars and Nightlife 

A look at the bars and 
nightlife in awd around Tokyo 
and Kyoto. 
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organizing your site 



Hey, why are we doing the sorting anyway? 

I thought that the whole point of User- j 

Centered Design is that you don’t design for J q 

yourself, you design for your user. J 



Friends don’t let friends sort alone 

Up until now, you’ve done the card sort all by your lonesome. 
But doing a card sort by yourself is not the (only) way to do 
things. Why? Well there’s one really good reason: You aren’t 
designing for yourself, you’re designing for your audience! 
And if you aren’t designing for yourself, why would you do a 
card sort by yourself? 

Ideally, you want to run the exact same card sort with the 
exact same cards—but have someone else sort the cards. Try 
to choose someone from your target audience. If for some 
reason you can’t find someone from your target audience, 
enlist someone else to help. At the very least, they will give 
you a second opinion on your site’s information structure. 



Ask a friend to sort the cards you created. Give them a very basic introduction to Mark’s site 
(careful, don’t try to influence them to choose one particular information structure), and let them 
organize your cards. Did they do the sort the same way you did? What different decisions did 
they make? Ask why! The ultimate goal is to come up with an information architecture for Mark’s 
site that will not only meet the needs of the site (and Mark), but those of the user as well. Write 
at least three things you learned from your friend’s card sort below. 


Get your camera out again! Now you skoulct 
kave two pictures oi two totally ctiilerent 
organizations of Mark’s content. 
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arranging your cards 


Let's see how our friend sorted the cards for Marks site: 

ExesciSe 

SoLyilOH 



-firichd agrees 
“that u Cul-tuvc w a^d 
Lahguagc w seem like a 
good -Pit "togrthev*. 


w Tv-avcl ;， was lumped 
\n\W\ *t)ic *U/o 6*t»cs. 

TVis makes sc^sc ar\d 
make -fov a 

beUev* overall tatejory 



w P«av/ 
y/cvc ov^V\3y>cd- 


Which card sort is right? 

Getting a second opinion on your sorts is important and often results in 
organization that you may not have initially thought of. But how do you 
know which one is better or which one deserves more weight? Well, it 
depends. If five of your friends do the sort and all come up with similar 
results, you can bet that’s probably the best way to organize things. 

However, you’re the web designer. Sometimes having two or three 
options and just tweaking your original sort is all you need. Make sure 
that when you’re done, though, you feel good about the organization 
you’ve come up with. You (and Mark!) are going to have to live with it for 
a long time. 
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organizing your site 


Arrange your cards into a site hierarchy 

Once you’re happy with your card stacks and titles, you need to put some 
structure in place. Lay your cards out like a site map. Just take a bunch of your 
leftover 3x5 cards and write the group names that you came up with. Spread 
those out on the table that you’ve been using. Then, line up each “content” 
card below the appropriate “section” card. 



七 site's overall 仏 cwc. 


IPb 


ExenciSe 


Once you’ve gone through a few iterations of your sort and had a friend or two try it out, arrange 
your cards as an IA diagram and take another picture. 
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card sort organization 




ExeRciSe 

SotuiloH 


After considering the sorts our friends did and rethinking our original card sort, we came up with 
a final sort layout like this: 


vcw'ovcd 七 he 
so 

tould ov\ 


I Japan I 


wt’ial trtlc *fov 
s*i*tc 


I ^ia I I F„a |pjr]| ^ || gg I 

I =r 11 n f = I n^n I s' I h—i 




T 


Mavk 、 {x^t\ diav"Y 
Will v/ovk 
Wo 汐 


as 


丁 he pho-tos ahd 

videos dc-Pihitcly 
belong uhdev" 
VWedia” 


Wlc kef 七 *tV>c ditics *m 
*tV>CiV- ovm dolumn bu*t 

dha^^edi *tV>c hcadm^ 
*to w Tvavcl No*tcs w *to 
bc*t*tcv* vcf\rcscy>*t 
*tlic vcsul*ts o( ouv 
davd sov 七 . 




f A °f OU，r ^ ic ^s pu-t 

a 7 i h 

^c 9 o,y. These a ，e good 

Uks /V s d about 
令 Chemal ih 4 \rrha-tioh about 

,P ah - This ^ also a pla^c 
”心 ah add ‘ 
^htcht he wahis io. 


l/\fe added w Ba\rs av\A 
Ki5^*tli*fc w *to *tV>c -food 
tatejovy because i*b kept 
tom.mj uf wV^Cr\ ouv- -fv-*»Cr\ds 

did *bKc sort- 
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organizing your site 


IA diagrams arc just card sorts ow paper 


An IA diagram is a lot like the “on the table” site map you created 
(and photographed) in the last exercise, but it’s also a lot more. An IA 
diagram not only shows the organization of your site’s content, but it 
shows the hierarchical relationship between sections and subsections 
of that content. The good news is, because you already took the time 
and did a few card sorts, most of your work is done! 




Hcvcs a ?ovW d Ma^rks 

IA. It looks a lot V«kc our 
tavd sorb) av-c 

a ⑼乙 cs . 


The \rcst o( 

would be 


s 


as 


Thihk o-f ah IA disa I 
^ ^1 drah ^ youv . 

匕 aird soirt. Catcgov-ics avc 

bv-okch dowh move, a^d 
heddihas ditt 


irvtpi 


ov-gdhiz^d by 


spirt *tV^c w^edia 

*ty/o SCd*t»or\S a\r\d flddcd 

{\\t appv-ofv-'»a*tc tor\*bcr\*b 
u^dev" 


Q 



Cool. So all the lines are 
just links, right? Like a 
site map? 


Wken you make your 
linal IA ctiagram，make 
sure you orcter your main 
keactings ty importance. 
Tke most prominent 
items skoulct appear 
liiglier up in your IA. 
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IA diagrams are not sitemaps 


IA diagrams arc NOT just links between pages 


IA diagrams are not about links — they’re all about the hierarchical relationship between 
sections and subsections of content. If you were to try to create a diagram that showed 
links between sections, you would end up with a useless, spaghetti-looking mess that 
wouldn’t give you any kind of information whatsoever about this vital hierarchical 
relationship between the site’s content. 

Think about it like this... most sites have links all over the place, cutting across categories 
and site sections. That would make for a pretty messy IA! 


If IA were about links... 


A 




/ 


Pho-fcos video 
rwighi be linked 
-Pv-orw all ovcv- 
/V|a\rk’s si-tc- 



Pood paacs may |i h k 

■to 匕 rti cs i h 

which /Wavk visited the 
ircs-bu^ht. 

Gee} BifS - 


The ihdex page would 
I’mk "to cvcvy maih 
page oh the site. 



The W 05 叫 ^ 
Imks bo Vavcl 
y>o 七 cs a 朽 d 


There are lots of flowcharting programs out there that can help you create 
a slick and professional looking IA diagram. On the Windows side of things, 
Visio is a good choice (though on the expensive side). On the Mac side of 
things, OmniGraffle is a great choice. 
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organizing your site 



Based on your card sort, build an IA diagram of Mark’s site. Remember, you aren’t showing links 
between pages, you’re showing the hierarchical relationship between sections and subsections. 



Add 

dhuhks -p\rom youv 

sovt-but 
be nr»o\rc derailed. 
Vo^i be a^fv-aid 
"to add cx-fcva 
subdatcgo\rics -fco 
better o\r0ahi^e 
Al3\rk ; s 




po^-t -foyjc-b -to 
add a title *to 
youv" IA dUyaw'. 




Somct«mCS 70 UII 

tar A sorb a duv-m^ In- 

丁⑽。 吟、七 sal 7 七 ' 3 00 ft d 

cMa^ts bo 70UV ov«5'mal «dcas. 
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finalizing your I A 



曙. •爾， 

►LytioH 


Always yvc y 01 
IA diayaw'S 
-t'i*tlcs. 



Your job was to to build an IA diagram based on your card sorts. Here’s what we came up with: 


Media” is most obvious 

ta-bcjov-y to scpav-a*tc- 

video ar^d f^o-tos 

Y/l|| W\OV"C OV"^ 3 K\IZ- 3 "blOK\ 

{jo media se^tiem. 




， grouped u 7 ikyo w a^d 
Wi\roshirwa Uhd(\r cities, 
3 hd put thcrw all UhdeV" 
l TVavel h/oics . )， This gives 

Ma\rk \room ■(» add 

no 七 es oh 七 "topics 

i-P lie wishes. 



The blo^ should be *f *iv-st l*mk oy\ *thc s*»*tc. 

XKis is v/hcv~c most of 七 he CorA^ttA, Will 

skoy/ uf> ar>d i*t cvcv> dould bedome pav**t o( 

*tV>c mdex. fa^c- 




is 

$n§s 

•52n4ss3a 

—hi 

$ 3 -szpooj 

pols 

u§.^ 
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organizing your site 


thereiore no o 

Dumb Questi9ns 


Is all this work really needed just to come up with some 
navigation categories? 

Well, it is if you want to do it properly. Some sort of thought 
needs to go into the design of your content and navigation. Hastily 
designed IA can have a disastrous effect on the success of a website. 
Even if you do shortened, “quickie” versions of card sorting and 
IA diagramming, your outcome is likely to be better than if you did 
nothing at all. 

What if I just want to skip right to the IA and not do a card 

sort? 

That’s better than nothing, but you will really have no way of 
sifting through and auditing your content. The reason a card sort is so 
important is that is helps you get rid of content that is irrelevant and 
makes you think about how all those content chunks relate to each 
other. IA diagrams can help with this, but they aren't as thorough as 
a card sort. 


If IA diagrams don’t show link relationships, what does? 

Most of the time, a site map is the best way to show what links 
are available on a site. The problem with this is that a site map can’t 
really be made until the site is finished. During pre-production, your 
focus should be on organizing content and not building links. That 
work will come when you start to build out pages. 

Do all websites go through this same process? 

Actually, most probably don’t-and that’s why so many sites on 
the Internet are so difficult to use. In so many cases, IA and content 
organization are a design afterthought, leading to unusable websites 
and content that’s difficult to find. Skipping pre-production will only 
lead to frustrated users and dwindling hits. 

How does a site’s theme relate to information 
architecture? 

IA actually directly relates to your site’s theme. The content of 
your site is what drives the overall theme, and the organization of 
that content is important. If the IA is bad or focus is put on the wrong 
content, it will not only confuse users, but your theme won’t come 
across either. 
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moving to production 


Move from pre - production to production 

Coming up with an IA diagram and doing all those card sorts may have seemed like a lot of 
work for a simple navigation. Mark will love you, though, especially when his users are easily 
navigating his site and finding all his content without any problems. 

And now we’ve got a well-organized IA, a storyboard Mark likes, and a clear idea where we 
want to take the site. Let’s lay down some markup and style! 



Mark 


w 


Japan 


Landscape 


Language 


Photos 


About 

Japan 


videos 


Video Clips 


Trave 


Notes 


Travel 


Cities 


Wary 


Food Notes 


Images 


Culture 


Media 
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Puild Mark's site structure 


organizing your site 


/ 

/markinjapan 

TV\'»s ^oldc'r Will 
V^old all 

-fov Mavk 、 i\it- 




This -foldcv- will hold all 
-tKc 'images needed *to 
make ouv layout >wov-k. 


/images 



index.html 


丁^ is the default HTML -file -fo^ 
州 ost web severs. II also haffe^s 
"to be ouv- home pa^e- 



This -foldcv- will hold all 
o( ouv- siylcshccts (CSS). 
Rijhi v\o>n v/c only have 

bu-t ihai ^ould 
•*f Alavk v/a>vts "to add 



suppov-t -fo\r firm 七 mg a^d 
mobile devices. 


/stylesheets 



screen.css 


This is ou\r dc-Pault stylesheet 
•fo\r se,\rtcv\ media. 



This is 七 V>e d*iv-ct*tov-y s*tvud*tuvc 
y/e v/'ill use *thvou^hou*t *tV>c book. 
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building mark’s xhtml 


Create mdex.html first 


Wsih 9 Xi+TTWL r^eahs you woh't be 

tempted b> Shcak style tags like <^h-fccv> a^d 

Markup. Vbu II have a Witt 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN 


p . 

广 <^t> ihto you\r ^av-kup. you II h 

\y sepavatioh o+ ^ohtcht style. 


"http : // www. w3 . org/TR/xhtml 1/DTD/xhtml 1-strict • dtd’，> 

<html xmlns= n http: / /www.w3.org/1999/xhtml" xml : lang= n en M lang= M en"> 
<head> 


<title>Mark in Japan</title> 

<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 

<link re1="stylesheet" href="stylesheets/screen.css" type= M text/css" media="screen" 


<body> / - , Thc 岬 ” <div> is the dOh-bihCV- -Pov- 

<div id= M wrap M > all ou\r ^Ohtch-t 3hd will also dllow us -to 

<div id= M header"> the page \v\ the b\rowscv- window. 

<hl>Mark in Japan</hl> 


</div> 

<div id= M nav"> 
<ul> 



Uc MV 吩七咖 just a 朽 ^ordertd 
|-,st usm^ Baders Y/c tame U? 
^ m ^c-^oduttion. 



<li><a class= n active" title= M Home" href= M #">Home</a></li> 
<li><a title="Travel Notes" href="# M >Travel Notes</a></li> 
<li><a title="Food from Japan" href= n # n >Food</a></li> 
<li><a title= n Photos and Videos" href= M # M >Media</a></li> 
<li><a title= n About Japan" href= M #">About Japan</a></li> 


</ul> 

</div> 

<div id= M content M > 
<h2>Blog Header</h2> 


sC 


f*ov* y\o^i) jus 七 use dummy 七 e% 七 * to f ill m 
-the cor\itv\i ar\d sidebar <dw>s. 


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis 
nisi eget est viverra placerat. Nam tincidunt ligula id turpis. Duis nunc. 
Nullam imperdiet quam ut magna.</p> 


</div> 

<div id= M sidebar M > 

<h3>Sidebar Header</h3> 

<ul> 

<li>Fusce diam. Pellentesque bibendum. 
Pellentesque pulvinar sapien.</li> 


usc ahotkv uhov-dcv-cd list ih -the 
sidcbam -to help ouv- 匕 ohteht. 

Nulla viverra vestibulum justo 


<li>Cras vestibulum elit id nibh hendrerit eleifend. Pellentesque id ante. 
Sed volutpat blandit mi.</li> 

</ul> 


</div> 

<div id= M footer"> 


<p>Copyright &copy; 
</div> 

</div> 

</body> 

</html> 


Mark in Japan, all rights reserved.</p> 

gives us a pladc -Pov 
Irnks ahd dopyHgh-t i^ov-^atioh. 

Hohu this is still y/ilhih the maih 
u w\rap W <div>. 
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organizing your site 


awd thcw screen.css for style 


卜 screen.css 
body { 

margin : 


女 


hi 


0; 

padding : 0 ; 

background : #026dc0 url ( ' . ./images/bg.gif') repeat-x top; 
font-family : Helvetica, sans-serif; 
line-height : 1.4em; 


h2 , h3 , p, ul , 
margin : 0; 
padding : 0; 


li 


x is jus-t a /px by 

午外 ‘ y 似 is i 

<is of £ 



p, h2 , h3 { 
margin 


the x-ax 
v-csult i 


u ^ h de 匕 I ⑽ multiple 

… a vule that sh^ c 
^ttv-ibutes. 


代 pelted oh 

page. The chd 
“ hi “ gvadicht dt. 


0 0 lOpx 0; 


ul { 


#wrap 


list-style-type : none 



margin : 0 auto; 
margin-top : 40px; 
margin-bottom : 40px; 
padding : lOpx; 
width : 780px; 

background : # f f f; 
border : lOpx solid #044375; 


The md'm stylmj for 'Wap 
<dW> mdludes a I Of% border a^d 
"0 auW dcnWs i\\t 

m *bV^c b\ro>wscv-. 


^header { 

background : url(' 
height : 250px; 


images/island header.jpg ') no-repeat; 


^header hi { 

padding : 30px 0 30px 30px; 
color : # f f f; 

background : url ( ' ../images/dot.png') no-repeat lOpx 50%; 
font-weight : normal; 


letter-spacing : -lpx 



Tk batkj^rou^a deader »s pla^d usm^ CSS 

by tVic M oMtr a^d settmj red dot 

as its batkj^o^d imay. 


► Continued on the next ㈣ 日 … 


you are here ► 


103 



adding a little style 


scrccw.css, continued... 


#nav { 


margin : lOpx OOO; 
padding : lOpx; 
background : #044375; 
border-top : 5px solid #033761; 


#nav ul li { 

display : inline; 
margin : 0 lOpx 0 lOpx; 



0[AY ^vigatioh is just ah 
Uhoirdcircd list that is displayed 
f ^ ihlihC -fashioh ihsicad of d 
blo^k style. The “display: 

-this attribute. 


#nav a { 

color : # f f f; 
text-decoration : 

} 

#content { 


none; 



margin : lOpx 000; 


0y\ I'mks, musi set tolov- oy\ 

仏 c elects rf.Umks^t 
take toW 
<dw >，s ov， clcwwts. 


padding : lOpx; 


float : left; 
width : 505px; 

} 

#sidebar { 

margin : lOpx 000; 
padding : lOpx; 
float : right; 
width : 225px; 

} 

#sidebar ul { 


TV^c sidcba\r arc 

botVi floated left ad 
y-cspc^*tWclY) w»d"t^s 

ec^udl about 2-/^ 
ar\d 1/^ s'idcbav-. 




margin : 0 0 40px 0; 

} 

#sidebar h3 { 

padding : 5px; 
background : #eee; 
border-bottom : 2px solid #ddd; 
font-weight : normal; 

} 

#footer { 

clear : both; 


padding : lOpx; 
background : #eee; 


border-bottom : 2px solid #ddd; 


/Wake 


夕 


s 。 


ah d sidebar <div> 


s. 


o 


Don’t worry, all this code 
can be downloaded from 
the Head First site. 

Actually, you should download 
the site. We’ve provided all the images, too, so 
that your design looks as good as it does on the 
page. You can also see Mark’s site online to 
compare your version with: 



www.headfirstlabs.com/books/hfwd 
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organizing your site 



Mark in Japan 


The si£ c | 00 |^ s 
a W like ihe 

sWybo 扣 ds 

^irk, approved, 
So w cVc jood 

9° ^ layout 

to\oY 

scheme, -too. 


TVic site looks 
jv-ca*t 3r\d V^as 

a sensible IA 

■bha 七 “use 

problems Ao>ny\ 
*tV^c road. 


H&ading 


Sample Blog Post 


Fupcv iliim. P^llofituqi^ 
btu^kjm NuiM'a Miv^ra 
㈣ uthilum \usto. P«ll04ilH4J» 

puMrur «4^i 的 ■ 

Cn&B 相 sKbyli^n si<iid rttn 
hAndfanS #!'AilifKu4 
F^allofitD^jQi id [Litqu 
vptgtpaL bteidl mi. 


wcbi^jkDr «[?>p!ccing o^ t. P^llanliKqM? 
i. Nvntfwidumi>qii(ii d 


This is amazing! I can’t wait 
to get my content up and 
watch the traffic start 
rolling in! Thanks guys! 


usQctaiJ^T ^iilpisan^g alcL Pflllonb^qL^a 
aL Nam .ncidu_ U^fidjn d lurp^-. Gkiio 

i anagni, SMpead 货 《 »d p 她 a cli 

ia bbmdi^ii I0C4 jb non ni^l, porui e 

fff, rnulla n&j9 raacibug fw%iE t a 
kjBp«ix^«4 polmH. Aciidaneu^ 
itilpiiA Hi, rnorjHt. In pui^p ip$Lfn, 
npm ngn, um, Pg^ruc I pc. Cnts 叫麻 
OGh5dS^ cimcl, areg. C^irphljr vql pod# 
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the complete production process 


Pre-productiow to production: The complete process 


❶ 


Gather all the your content. 



❺ Brainstorm a theme and 
visual metaphor ideas. 


Map of Japan 
Sushi 
Hiroshima 
The Golden Palace 


❺ Develop a visual metaphor 
and think about layout. 


o Build a storyboard 

(on paper). 


o Do a few card sorts and 
create an IA diagram. 



o Markup your content and 
style with CSS. 


_ 


■ 
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organizing your site 


Your Web design Toolbox 

You’ve got Chapter 3 under your 
belt, and now you’ve added 
card sorting, IA diagrams and 
information organization to your tool 
box. Next up? We’ll dive into designing a 
site for your audience... 





BULLET POINTS 


■ 


■ 


■ 


■ 


The point of a website is to communicate 
information-if that information is organized badly, 
your users will leave and not come back. 

The organization of a site’s information has a direct 
impact on its navigation and usability. 

Card sorting is a cheap and easy technique used to 
impose an information structure on a site’s content. 

Never rely upon your own card sort of a site’s 
information—you aren't designing for yourself, you are 
designing for the site’s audience. 


■ 


■ 


A card sort often results in orphaned cards-which 
are a clear indication of content that should either be 
rethought or discarded entirely. 

An information architecture (IA) diagram is a 
representation of the hierarchical relationship 
between sections and subsections of the site’s 
information. 

Information architecture diagrams are not designed 
to show the links between pages in a site. 
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4 layout and design 


Follow the Golden Rule 




It pays to be a good listener... and to carry a pocket calculator. 

We’ve been talking about user-centered design for a few chapters, but here’s where you 
really put your listening skills to the test. In this chapter, you’ll take your users’ feedback 
and build a site that meets their needs. From browsers to screen real estate, it’s all 
about giving your users what they really want. Not only that, you’ll learn the secrets of 
the rule of thirds. Find out how a few easy presses of the calculator, a ruler, and some 
gridlines can turn your blase web page into a thing of beauty. 


this is a new chapter 
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getting to know your audience 





既 


■ 




g 韶 ; inn 潑 


Pesign is about audicwcg 

The design and layout of your site is the lens though which your users view and experience 
your content. If you have a confusing layout, your users are going to have a bad experience. 
However, if you develop a design and layout that is both functional and aesthetically pleasing, 
your users are not only going to hang around your site longer, but they’ll want to come back. 

The first step on the road to putting together a design which appeals to your users is to actually 
know your users. It’s a lot harder to come up with a design that meets their needs if you don’t 
know who they are (and what makes them tick). 
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layout and design 


r^harpen your pencil 


Who’s your site’s audience? Take a look at these two sites, and 
write down who you think the specific audience of each site is. 



„ 

L :、： ••民 

二: ■ 

j—Lb- 

wem 

f 

1 

_ 


」 ■ J 




V 



Hop ohl'mc bo see tKcsc sites, a^d jud^c 
aud'ic^tcs -fov yourscl-f. 






= 1 . 


\4"I H : 

I ■也 XCVllfeHJII 





運 



g _ 」 

I www.walmrt.coiq | 
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identifying your audience 


parpen your pencil 
、 乂 Solution 


Let’s take a look at the possible audiences for these sites. 



-food fho-tog\raphy meals m-to models 
and shows -the si-te's passion (or all -things (ood. 


Delicious Pays audiehde is a youp d 




l^-dcptli -food v/v-itihg makes 
Delicious Days rwo\rc thah just a 
site "fco -Pihd Vcdipcs. 




■ nil 

mr^ ■ I i • 




I OB 


野 n ' 5 ,c 





people *th3*t see dookm|j as more *tl^h jus 七 


t 


. s .?! n ?i ! ： i.V!^3 iK^y. ."tp.d?；. These pcoj>l 
mijh-t be described as w -foodics w or see 
^op(l .^s ^ .-form jS|y.*t ： •…… 



WiUa^rb uses a ^ ^tr\c f u^ect^ 

七皆仏 1 _ dcs\^ seems t> br^l a^d 

d^Cdl d >/ldic 3 udlC^C* 

iValr^av-t^s 'm*tchdcdi audiehde is no 七 
immediately apparch*t* Their si*tc is gchcrid 
ahd v/as rwost likely desired to appcaj to 


a large group of people. 


•the siic-^oi -favov'mg a^y pa\rtidulav- gv-oup O-P iicrws. 
Asorwethmg -po\r cvcv-yo^c. 


o^-Pc\rcd 


o 灼 


cvc\ryo^c 
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layout and design 


Your newest gig: RPM Records 

A local record store — RPM Records — decides they want to redo their horrendous 
site that was created for them way back in 1998. They not only want to bring 
their site up to date, but they want something that really meets the needs of their 
customers. The kicker is that they are also one of the sponsors of an upcoming 
progressive music festival, and they would look really silly if they were still using 
their old site by the time the festival starts. 



You’ve got to redo RPM, make it look great, and ensure current users can get 
around easily. 


Tk _ 
^63 IW 


Were really 


in 


jam 


a 


here! 


We need this 


site fast, and 


has to 


it 


look great 




p.- 


VlXTACE VI NAL. 

Delivered 


II omh.' 


Wtkamt eo tin ItPM Millie hunt 


RPM. ACIKK LV UHE- n-l. VKil. OHiUuC QlUfX 如 C 

dr n "h itic v^nCiv of ini:l.ipc Mrc. bcw ¥ioinl fiuun Bill 私 

paahi^. Pfdi£c and urdcr bsnJii> wsd c^J tec 2kA Jiy Tl*j|iapL|.' 






Aboul KrM 
ConlacE RPM 


Jii^E \i I i v k i\ 




■ fr- r< T^ 
IThlirUlLri a 


ILfdHHb Ih-fal 


W 厂 




RP/W’s oy/hCV- 
3hd -Pouhdcv- 


How would you design a site that looks great and meets the 
needs of existing RPM customers? 
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personas 


Piwpomt RPM's audience with personas 

When you’re designing for a specific audience, you’ve got to know what they like, and 
how they’d use a site. But you can hardly deal with hundreds — maybe thousands, 
even millions — of users all at once! 

This is where a persona comes into the picture. A persona is a single user that 
stands in for all of your audience — a fictional user that has the most prominent 
characteristics of all your intended users. Those characteristics should relate to 
things that impact their web experience and browsing habits, like the browser your 
audience favors, or how long your audience spends online each week. 


d ndmC — *t^lS 
V^clfs bo id ⑼ (3s 
y/ell as 


youv" fcv"sona 



与 We all youv- pe\rso 灼 as an 
ir^ay. This ai-tathcs a -fade 
bo a sbory av\d helps -to 
v-cm-fov-dc 七 he mdividualiiy o( 
the usev. 


The sp^i-pid details of -the 
pc^rsoha hclf US Uhdcv-stahd how 

ea 匕 h usev ih-teva^-b with a 

spedi-fid y/cbsitc- 



Name: Arm 
Age: 1% 

Internet Connectivity: I?SL 
Avg. time onliHe/week for leisure: 15 hours 
browser of choice: Firefox 
Operating System: Windows XP 
Screen Resolution: 300x600 
Occupation: Student 

Petails: Aww considers herself very tech - savvy. She 
actively participates w social networks and online 
communities. She also regularly shops online. Her 
laptop (which is a little old, but all she can really 
afford right now) is her primary computer - and 
where she does all of her web browsing. 

TV^C most important fart a ferso^a is 
details. you\r user a s-tov-y a^d a pcv-so^ality. 
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layout and design 


This is what you call web design? 
Making up people out of thin air, and 
figuring out their hobbies? Come on! 


o 


Your personas should be based on real data. 

So where exactly does all of the data used to build personas come 
from? Well, it can come from a lot of different places. Technical stuff 
(like operating system and browser) can come from server statistics. 
Information about how your users behave online can come straight 
from the users themselves — using tools like surveys and focus groups. 
The point is that when you build a persona, you are not pulling 
characteristics out of thin air. 

Let’s look at some data about the RPM users that we can use to build 
accurate personas for the new RPM site. The RPM owner had some 
old surveys he’s given us to work with: 


Pata about RPM Music's users: 



Age 


18 - 24 


25 - 34 


32% 

30% 



Age ahd Achdcv- give 
you ihe -fouhdatioh 

0h whi 匕 h "to build -the 
o-P youv pevsohas. 


65% 


Music Preference 

Blues 5% 
Classical 1% 

Country 15% 
Electronic 3% 
Hip Hop/Rap 25% 
Jazz 4% 

Pop 30% 

Rock 20% 


Female 


35% 


Operating Systems 

Windows XP 

Windows Vista 10% 
Mac OS X 13% 
Other 2% 

browsers 

Internet Explorer 


Screen Resolution 


Music. 如 11 Wl us v/V>at 

oiav- audic^c -bo listen -to a^d 

\as dtc\dt oy\ a ar\d 

look artd -feel tiic site，smte 

i^s so w>usi£.— 


75% 


Firefox 


22 % 


Safari 10% 
Other 3% 



800x600 43% 

1024x768 42% 

Higher 10% 

Don't know 5% 

Internet Connection 

Dialup 12% 



DSL 


55% 


All o-thev- data \rc 5 ardm 5 -the 

七 etVmoloy/ air>d bv-o>ws*m^ habits 

d RP/l/fs USCV-S tdiY\ V>clf US 
3 move vouv>dcd ^y\A 
adtuva-tc pcv-soir>a- 


Cable 


27% 


T1 or higher 6% 


These stats avc -Pv-om old 
dus-tom C \r survey, av\d ihe 
l° 9 s -P'rom the Rp/W site 
web sc\rvcv-. 
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primary and secondary personas 



Based on the RPM user data, create two different personas for the RPM Music Store 
redesign. For the first persona, take the top value for each of the categories. For the 
second persona, use the secondary value. 


: Name: 

! Age:. 

I Internet Connectivity: 

I Avg. time onWm/mek for leisure: 
；browser of choice: 

； Operating System: 

;Screen Resolution: 

; Occupation: 
j Petails: 


Make suve you add a pidiuve. 
Pasic *m a Cvcativc Commons 



pho*to, oy>C you 

av-ouy>d, ov you c^y\ +*md 

七 ha 七 seems bo 仑七 youv pevso 灼 a. 



L 


J 


Name: 

Age:. 

Internet Connectivity: 

Avg. time owliwe/week for leisure: 
browser of choice: 

Operating System: 

Screen Resolution: 

Occupation: 

Petails: 


Make up some -Pidtiohal details 
about you\r fClrsoha (ihdud— 
od^upaiioh) — this helps aive -the 
pev-soha a rwov-c \rcalis-tid +ccl. 
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layout and design 


O 


o 


Two personas means we can deal with more 
common traits of our audience, right? So 
we end up with more satisfied users. 



Building two personas widens the 
audience you can build your site for. 

When you are building a persona, you’re creating a representation 
of the primary characteristics of your audience. But most of 
the time, your audience isn’t composed of just one type of 
person. You’ll have lots of users who do not fall in line with the 
characteristics that you identified for your first (primary) persona. 
This is where the secondary persona enters the picture. 

A secondary persona represents the characteristics that are next 
in line behind the majority characteristics that you used to 
build your primary persona. So you design first for your primary 
persona, but then you can also work on meeting the needs of your 
secondary persona, too. The result? A site that meets more of 
your audience’s needs and makes more of them happy. 


thereiare no o 

Dumb Questi9ns 


So do I always have to build 2 personas? 


You don’t have to, but it’s a good idea. Audiences are diverse. You aren't always designing for one specific type 
of person. The second persona represents those audience members who are in the minority... but sometimes by only a 
percent or two. 


Can I build more than 2 personas? 

A- 

Jr \* Absolutely. If your audience is diverse enough (as shown by your audience research), it might be a good idea to 
have personas that represent other audience characteristics. Be aware, however, that you really don’t need more than 
three. Too many personas just add confusion and detract from the project at hand. 
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personas for rpm music 



Based on RPM user data, here are two personas (a primary one and a seconday one) we can 
use for the design and implementation of the RPM Music site. 


Males v-cfv-cscyv-b 

use 打 - —rtc a _ 


Jo” -Palls ih-to the largest age 

giroup o( the Rp/W USCV-S (Hz 午 ). 



Name: 4ow 
Age: M 
Internet Connectivity: PSL 
Music of Choice: Pop 
browser of choice: Iwterwetixpjorer 
Operating System: Windows XP 
Screen Resolution: SQQx60Q 
Occupation: Architect 

details: Jow |s a busy guy and pwly spends about a^i 
hour a day outside of work oy\\m.M uses the fawily 
OQwpyter to read news and a few architcctyra! blogs 
onliiie, OccasiowaHy, he buys books and music from 
Amazon when he can't make it out to the store. 


^ ,s thc pmo^a -Pov- Ihc R?M /Husid 

a typical usev- o-P siit. ttc 
will be tk maih 4 乙 us throughout ihc desia h a^d 

dcvdopmch-t of -the site. 


Because Jor^ Vias a busy c^cter, V^c V^as little 

hWt leisure. Wen k uses /Wzxm ， 广梦 

mC a^s s O^lmc s^offm^CSfCtially ^rov 

. 

w ： i» ii ± i r , dc tails Ime u 
W，th ihc ^ -the P ⑽从 


w>usi£» 


4 
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layout and design 


Susan *m*fco scdor>d lav-^cs*t 
dcrwo^irafKid of RPM Musit usc^rs 
(2 • 千一 3 千 ycav--olds ) 扣山 as a 
vcfvcsc^ts about 1/^ o( 

*tKc -total VlS*l*toVS. 


f usah dohhCdts (htcv-hct usmg a Cable lihe 
h f ，士'以 A^o^dmg the I ， 

tnis is the sc^ohd most dommoh way RP/l/J U sev*s 
-to the site. - 



/OZ 午 x7 厶 0 is pv*ct-ty 
siahdaird oh lap-tops, 
Mac OS X is ah 
CX-t\rCry»cly populav- 

0 P ^ atih 9 s y 斗〜 ar^oha 
to ^ studchis. 


Name: Susaw 

Age; . 

Internet Connectivity: Cable 
Music of Choice: 私 p/Wp Hqp 



browser of choice: Firefox 
Operating System: Mac OS X 
Screen Resolution: 10^4x768 
Occupation: StydeHt 

Stalls: Susaw is grad 对明 d speeds a fajr 

awouiit of time Qwiiwe outsjde school. She is very 
tcch-savvy aiid likes to shop awd buy wysic oiiliiie for 
her MP^ pby 叱 . Jf?r 铐 laptop so she caw easily 

take Motes iw class aiid study outside her apartmewt. 


S, is the yto^A^ pc«o„a ^ov- the R?M Musid site 

t[ d sc^ohd ^osi 6 。議 。 h ) the site. 

S Js^ll 七 4 。編吟 U 
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focus on your personas 


Let the personas be your guide... 

So now you’ve got your two personas, and it’s time to ask: “What 
would Jon do?’’ “How would Susan react?’’ Instead of designing 
for hundreds or thousands of faceless users, you’re now designing 
for your personas... and only your personas. 

So let’s look at the old RPM site once more, in light of Jon and 
Susan. What do they think about the site? 


I 七 doesn't 
ma 七 W 4a 七 
YlC 七 Wmk 
about RPM … 

do ouv- 

^CV"Soy\as 七 Wmk? 



Joy^ docs^t use old RPM 
S 如 because doesy. t 

m W.S Wo^scv. The 

I J seels-to fee 
Y/V^a-b Will ov^ V^»s 


'■ ' • ~ s, "tc is old 3hd doesh^ 
adheve -to alo-t Jc -the s-tair>da^ds 

^ "™ a y s 卜匕。 啪嗽乙 e sites. £usar> 

doesh t have -to Icav-h how -to 
use 舢 outdated system. 
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layout and design 


You know, Ive been getting a lot of 
complaints about things looking 、、 weird 〃 or 
'too big." Oo people need bigger monitors 
to use RPM? 


0 



Smaller displays limit screen real estate. 

Jon uses an 800x600 screen resolution, which isn’t very 
big... and, of course, if Jon uses that resolution, then most 
of the RPM users do, too. 


With a lower resolution like 800x600, parts of the RPM 
site aren’t showing up, and Jon’s having to scroll all over 
the place just to see everything. Not so usable... and sure 
to cause problems. 

It sounds like RPM’s old site was designed without much 
regard for screen real estate... and that’s the first thing 
we can try and fix. 


Is it better to design a site that looks perfect on one specific 
resolution — the most common one used by your audience — or 
a resolution that looks pretty good on lots of resolutions, but 
not quite perfect on any? 
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comparing screen resolutions 


Resolution impacts design and layout 

Screen resolution affects the screen real estate your site has to work with. Higher resolution 
means more available space... but also tends to make things look smaller to users. 

Let’s look at the old RPM site in several different resolutions: 



壯 \1Q0^00 (a yrtibf 

\\\o^\ \rcsolu*tior\ 
wt Con\n\OY\), 

smallcv*. 

|h *tWis v-csolution, 

s'i*tc layout >s 
visible alo 灼 5 wrth d *to 灼 
wWrtesfa 以 （ ov* ba^kjv-ourtd) 
ov\ -tV^c side- 


USOxSOO 


奸 丄’? 2 ■午 r 7 味侁 c Ch 七 1 代 by 。 并 
is still visible. Howcvcv-, -the 

^is still p^Uy |^a c； 

the wh.t«p^ c oh ihc Hght 
⑼七 «\uitc so pvomihChi 






(■r Ini . 1 
SjfCCLils 
Alxiul Km 
ccptBigj ： ity^j 



V>kDme Ed Ihe KJ B ^I Miorv 



Mlm£ h li'd* pnc»a, M, vt jiipw %ub 1 _Mr 

n!hr ■ 食 sic TTnc+jir-d ^Lipmd neW ^iiuJ rcc-ordh if I pam 

pf IPKsMc. rUoc ^.bI-otiJIqi udr^ Msd pn ^k! dtj 1 





l?ijf h«R 

Pl^ii 



， Pjij 



i 


厂 





122 Chapter 4 


10Z4x76S 










































































layout and design 



TKc 七 you’ll v>o*t'idc 
W\{\\ *tKc s*i*tc a*t ^00^00 
is -that cvcryiiim^ appear 
lav-^cv. The layout is actually 
bi^cv- *tV>a^ *thc available 
syatt \v\ the bv-oy/sev 
y/'mdovy. TKeve avc sdvollbavs 

-that appcavcd a*t h^Kev- 

v*csolu*tioy>s oy\ *tV>e side 

avc tomplcicly ^c. 



cvcv-y>whcv*c> dv>d dll 七 he 
y/ii*rtcspadc dv>d badk^v-ou 


300x600 


At ^ v^solutioh o*f 

厶午 Ox 午分 layout is 
absolutely Ugc - a^d the 
s”h … I estate simply 
匕七 dohtaih i-fc. Ohly the 
smallest fov-tioh c^f the 
layout is actually visible 
•m the bvoy/sev y/ihdow. 

you waited -to see the 
wt of the page, you 
would K^vc "to do ^ whole 
lot of s^\rollihg. 





Welcome ta the RPM A 


RPM Mii^lc k the pnemter, , - 
oiTrr h wide vsuicLy of vinlsij£P p 
of music. Place and order loday 



About RPM 


Jmt Arrived 



640x480 
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screen real estate 


Scrccw real estate determines how MUCH of your 
site will display m your user's browser 

Think about screen real estate as the size of the canvas upon which you will build your 
website. But the thing is, that canvas size isn’t fixed. Some users have large 30” displays, 
some have nothing but a tiny iPhone. Even worse, a lot of users actually access your site on 
multiple screens: a phone on the go, a 21” monitor at work, and a 14” AirBook at home. 


Screen RESOLUTION also affects screen real estate 

Then there’s screen resolution. Even on a 21” monitor, users can choose their resolution: 
from 640x480 to 1600x1200, with a ton of different (and often unusual) choices in 
between. A higher resolution means that things appear smaller — and you’ll have more 
virtual space for your site to work with. A lower resolution means that things on our site 
appear bigger, so you’ve got less virtual space to work with. 


I don’t know about all that. I just know 
that the RPM site sucks. I love coming in and 
picking up some vinyl, but online... no way. 


o 



Your users don’t care about screen real 
estate... they just want sites to “work.” 

Have you ever seen a site that has an opening message 
like, “Site best viewed in 1024x768?” Have you ever 
actually gone in and messed with your screen resolution 
based on one of those messages? 


Yeah, not so much. 

It’s up to you, the web designer, to make sure a site 
looks right for your audience. You can’t count on users 
changing their resolution or the device they use your site 
on... at least not if you (and your client) want to stay in 
business. So we’ve got to figure out a way to make RPM a 
lot easier to use for Jon, who’s sporting an 800x600 screen 
resolution, and Susan, who’s using 1024x768. 
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layout and design 


^^Sbarpen your pencil 




Below are methods for dealing with different screen resolutions. 
Take a look at each one and write down a pro and a con of each. 


Methods 

Use JavaScript in your page to automatically PrOSJ 

detect a user’s current screen resolution, and ………… 

direct them to a version of the RPM site that . 

works best with that resolution. Cons; 

Use JavaScript to load a CSS stylesheet Pros: 

appropriate for each user’s screen resolution. 

Cows: 

Design a single version of RPM that works Pros: 

fairly well with a wide variety of devices and 

screen resolutions. . . 

Cons: 
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dealing with different resolutions 


parpen your pencil 
、乂 Solution 


Your goal was to write one pro and one con for each of the 
different methods for managing screen resolutions. What did you 
come up with? 


Methods 


TW»s 如 “dest oUk tWc o ? t « or , s . 

Seriously, who wants "to design iV<at many sites. 


Use JavaScript in your page to automatically 
detect the user’s current screen resolution, 
and direct them to a site that works best with 
that resolution. 


Pros: Ability to haiidle a wide variety 
of screeii resolutipiis. 

Cows: If JavaScript is off, this 
method becomes useless. 


Rely'm^ oi\ JavaSdv'ift (or a dvrtidal task like r^ak'm^ 
suv-c youv- pa<jcs av^c disflaym^ f\rofcv-ly is〆 七 sudh a 
good idea, l-f 七 hevVs a sdvipt fvoblcm, ov Javastv'ipi 

is both -these bedome useless. 

Use JavaScript to load a CSS stylesheet Pros: Owe sit!? V/jth MVlIlPl ? 冬 

appropriate for your visitor’s screen resolution. (HU|i*|pjG S(i*GS« 

CoMS: AgaHjio 办 抑 

This is a bciicv- s-tv-atejy a siic -Pov cvc\ry device sdv-cc^ 

Ircsolutio^. you^vc jot -to r^uliifle CSS (\\ts, bui 

you o^ly have {p oY^t XHT/WL (\\t - whidh less ^avkup 

"to rwair>ta'm a^d updaic- 




Design a single version of RPM that works Pros: No JavaScript or extra code. 

fairly well with a wide variety of devices and 


screen resolutions. 



Cows: You must decide ow a "base" 
resplwtiows that you will design for. 


K*,s is *tV>c easiest v/ay *to 50. Uoi oy>ly will you less dodc, bu*t you also 

0 ^i be oy> JavaSdnft *to handle resolutions. AH ^ r^ttA *to do is 

Ic^ti-Py smallest 代 solution will >woirk (or youv uscirs ar>a dts\(^ \or 

All lav^ev* resolutions y/*ill vciadcv* s*i*tc pvofcvly, ay>d sr^allcv- sdvcc^s 
ill Sdiroll ba\rs (bu 七 hofdulb/ 七 his is a 七叫 povtioy> ok youv usc^rs). 
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I understand screen real 
estate, but I’m having some trouble 
with screen resolution. How exactly 
is the resolution of a screen 
measured? 

Screen resolution is measured 
in horizontal and vertical pixels. So 
a small display may have a screen 
resolution of 640x480. This means 
that the monitor displays an area of 
640 pixels wide and 480 pixels high. 

A resolution of 800x600 means 800 
pixels wide and 600 pixels high, and 
so on. It’s also important to note that 
it isn’t just computer displays that 
measure their resolution in pixels. 
Televisions (LCDs, DLPs, etc.) all 
use the same method of representing 
screen resolution. For example, a 
720px HD television has a screen 
resolution of 1280x720. 

Are there really that many 
screen sizes and screen resolutions 
that I need to think about when I’m 
designing my site? 


I think I want to be 
forward thinking and shoot 
for 1024x768. Besides, a 
large chunk of my audience 
is already there 


no o 

Dumb Questions 



Absolutely! Even when it comes 
to traditional desktop computers, 
you’ve got to be concerned with a wide 
variety of screen resolutions. Computer 
screens can range in resolution from 
the very small, 640x480, to the very 
large, 2560x1600. And that doesn't 
even count mobile devices (iPhones, 
cell phones, PSPs, etc.) and those 
other consumer devices that allow you 
to browse the Web (like the Nintendo 
Wii, for example). Ultimately, it all 
comes down to doing your research 
and knowing your target audience— 
and developing a persona that takes 
the important user characteristics into 
account. If you know that your primary 
persona generally views websites at 
a lower resolution, you don’t have to 
worry too much about designing for 
higher screen resolutions and larger 
displays. 

Ok, I get the fact that I’ve 
got to worry about lots of different 
screen resolutions and display 
sizes. But is there one screen 
resolution that is most widely used? 


It's all about your audience. If 
you’ve done your research and you 
know your audience, you can probably 
decide upon a target screen resolution 
that you can design for. However, if 
you don’t know anything about your 
audience (or if your audience is very 
general), most web statistics agree 
that about 54% of users have a screen 
resolution of 1024x768. For more cool 
statistics, check out 
http://www.w3schools.com/browsers. 

How will I know if my 
site works on a certain screen 
resolution? 

Test, test, test. Build your site, 
and then change the screen resolution 
on your display to test out your design. 
If you are designing for a specific 
resolution, build the site from the 
ground up in that resolution. If you are 
designing for another kind of device 
(mobile device, etc.), be absolutely 
sure you’ve got one of those devices 
around in order to test your site on it. 
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xhtml and css foundation 


Puild aw XHTML and CSS foundation optimized for 1024x768 


Sta^davd XWT/WL S-tvid DOCT/PE 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http : // www. w3 . org/TR/xhtml 1/DTD/xhtml 1-strict • dtd’，> 
<html xmlns="http :// www.w3.org/1999 / xhtml" xml : lang="en M lang 
<head> 




<title>RPM Music</title> 


<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 

<link rel="stylesheet" href="stylesheets/rpm.css" type= M text/css" 
media=" screen" /> )} u 

</head> <dW id 二啊 > 』 

<body> be used *fco ouv- 

<div id= M wrap n > layout ^ bvoY/scv* 

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam 
est nulla, posuere ut, luctus non, ornare in, augue. Sed ultrices 
turpis at mi. Vivamus nisi neque, vehicula vel, imperdiet a, fermentum 
vitae, purus. Donee at enim. Nunc sollicitudin sodales sem. Lorem 
ipsum dolor sit amet, consectetuer adipiscing elit. Proin ligula magna, 
feugiat ac, cursus eget, aliquet at, nibh. In pulvinar massa in sapien. 
Proin egestas. Suspendisse fermentum. Vivamus commodo aliquet libero.</p> 


</div> 
</body> 
</html> 


t This dummy text is just temfov-av-y so wc 

su\rc ou\r page is setup pvopcvly. 



rpm.css 


/* rpm.css */ 
body { 

margin : 0; 
padding : 0; 
background : #fbf 9ef; 
font-family : Helvetica, 
line-height : 1.4em; 


TWis is a setup (or <body> taj. 

/ T^r。out be faddmj a^d mavjms, set a 

batkjrou^a dolov 扣 d a establish a 

I'me (or site 

sans-serif; 


P 


margin : 0; 
padding : 0 


#wrap 



margin : 0 auto 
width : 900px; 



O au*to Will CtY\{,CY ouv 
dummy m i\\t bv-o>wscv-. 

This value Will also alloy/ youv 
s*i*tc b> adjus 七 *to ⑼七 
strttr\ vcsolutioir>s. 

物 P” 加』 Chou 9 h ^o^odaic < 
\o>r the RP/W site- 


a 


wc 
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Tesr DriVq 


Create a very simple test page. 

We don’t have much to RPM yet, but go ahead and create index . html and 
stylesheets/rpm. css, and load them up in your web browser. 




IXHI H.T 1 .M 

mr- 

pUhmm rwam ri hi^w. _pop 


-WWhi-l. 
SiapanAuw 1 st 



f rai nJ*a pwa JL ^KfejanMorv 

曙 Cl&npcP-KP^ *1« 11__% _ 肩 1 3 _ _ 

丨叫 Ptoji rr*r* IPv4fli*e M»#i 4^Pl. h 








Lpv» r^L[Hip■ w§m rt "Li_■ VLmwNLnqyi M 

AripA.* irtiHWi,M 儀 a rtai jMW fhWiifcW hM£ UaAOUVibUfti 
■f*. ^Mlpv iw h> p?vi ' jjbuWm ' " Ata- kv^i M PMiNpw 放吻 

, _h» li_i_ !■ ■hiT T It FT I "■'ili'nftni ： 



ll 



Whoa... what happened to designing 
for our personas? Jon uses 800x600, 
so why are we optimizing RPM for 
1024x768? 



Knowing your audience lets you 
make informed decisions. 

Jon uses 800x600, but if you check the RPM user 
survey back on page 115, 800x600 just barely nudges 
out 1024x768. Since we know that, we can build a site 
that actually looks ideal on 1024x768... but that also 
looks pretty good on 800x600, too. That’s the power of 
personas: you’ll have a good idea of how the decisions 
you make may affect your audience. 
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RPM features 



Hmmm. Latin text 
on a screen... not really 
what I had in mind. Let me 
give you a better idea what 
I’m looking for... 


RPM Music Z.0 

□ Reach all my current customers. 

Update the look and feel of the site. 
Provide a blog, but as a secondary focus. 
I I Feature records ow the home 



Which of the RPM site features have we addressed? Any of them? None of them? Check off any 
boxes you think we’ve handled (or at least worked on). Then write down your ideas about how to 
take on the remaining features for RPM Music 2.0. 
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layout and design 


This is terrible... weve spent all this 
time building personas and entering Latin 
text on a screen. Now the CEO thinks weve 
got nothing done. Were way behind... 


Frank: I’m not so sure. I actually think we’ve got a good 
handle on his first requirement: “Reach all my current users.” 


Joe: You mean because we can get text to look right on 
1024x768 and 800x600? 

Frank: Well, that’s part of it. But our personas — 

Jim: Jon and Susan? Enough with the fictional characters 
already! 

Frank: No, I’m serious. I really think if we can please them, 
we’ll have reached RPM’s core audience. 

Joe: How do you please a persona? I mean, how do you know 
if you’ve designed for them? 

Jim: Maybe you can send a fictional survey to their fictional 
address. Offer them a fictional gift for responding... 

Frank: Okay, okay... yeah, we can’t exactly ask Jon or Susan 
what they think. But we know they’re young, that they’ve got 
modern computers... 



Joe: ...so you’re saying that if we design something that’s pretty modern, then they’ll like it? 


Frank: Exactly. 


Jim: Okay, just for a moment, let’s say I buy into all this persona stuff. What is modern? I mean, how do 
you make a site look clean and hip and all that stuff? Isn’t it just aesthetics? Like it’s all in the mind of the 
designer? 


Frank: Not at all. In fact, I was just reading about something pretty cool: the Golden Ratio. 


Joe: Is that like the Golden Rule? Do unto others... 


Frank: No, the Golden Ratio is a cool way to make sure a site looks pleasing to the eye. Let me show you... 
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grid-based page layouts 


Humans like things lined up and well-organized 

What makes a beautiful site appealing to us? What makes an ugly site so unattractive? 
Well, most of the time, it’s all about how our eyes perceive the elements on the site. 
There is nothing worse than a print document or a web page in which graphics and text 
have been thrown in haphazardly. Our eye needs predictability and a certain amount of 
visual logic when absorbing information. 

Imagine if you laid out a grid on top of your favorite sites. Do things line up along a 
grid? Are there strong horizontal and vertical spaces that allow you to group the page 
into sections? Take a look at a grid-based site... and the old version of RPM: 


ho 
clcrhcirts 

^ 败 y "top 
page .. 


...a— 叫狀 
3*t 

七 V\C bo-tw 



Sub*tv"a^*t>or\.c.om *takcs a 
based *to V^ow>c fay 

desi，Notice mv'isiblc 1’mes 

-bvavcl -fv-om 
dioy/y\ ■t^V'ou^ v*cs*b 

pay. Imc a\r\d 

av-c also imflemeyrted. 




备 rid 二二一一二 


RP f 斤 do ^ ^ i.-b, ihc 

Jirid. Wot.dc how the Sidebar bovdev 
,p ，h bctwe ' h “ 9Hdlih« ; ihe 

uv 匕 ows doh i c^ui-tc lihC 


up. 


Ko matW V^ov/ you 
a ovcv 

RPM, vjoibir^ '»^cs u\>! 


7 



No 给 rid 
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layout and design 


How wide should my grid be? Use the Golden Ratio 

The grid is one of the oldest graphic design tools out there. It’s so old that it predates “modern” 
graphic design. Way back during the Renaissance, painters started using a grid based on the 
Golden Ratio in order to compose their paintings. Golden Ratio? What the heck is that? Well, 
if you take a length of a line and multiply by .62, you get a ratio that can be used to create a 
pleasing, natural-looking grid — that’s the Golden Ratio! 

The whole idea behind the Golden Ratio is to use a balance that we’ve all seen around us our 
whole lives, and put that balance into use on a website. The result? Sites just “feel” and “look” 
right to our eyes. Just take a look at a few examples of the Golden Ratio in action: 



Da VWi’s Las 七 Suppcv- is a yea 七 
example a\rt u-tilizjcs -the 


今 olden Ratio. 




The n\B\y\ 匕。竹七伙七 
se^tio 灼 is -the 

七 he v-atio a^d 
-fov* 

3 bout Z/3 o-P 

七 he pay. 

V^cadcv 

\}\t WodV. 

^ - - 

The nautilus shell is ah 
example o( the 6io\dtv\ Ratio 
showmg up *m ir>a-tu\rc. 



TV^ s ， dcbav 七 smaller 
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the rule of thirds 


The rule of thirds: A shortcut to the ftoldew Ratio 

The Golden Ratio says that if you take the entire width of something, and multiply it by 0.62, 
you’ll get a nice wide area that you can put content into. The remaining 0.38 is great for sidebars, 
extra content, things that the eye should look at second. 

But multiplying by 0.62 isn’t that handy unless you’re carrying around a pocket calculator (Head 
First Algebra, anyone?). Fortunately, 0.62 is awfully close to 2/3 … and the remaining 0.38 is pretty 
close to 1/3. So if you divide something into thirds, two of those thirds are perfect for your main 
content, and the remaining 1/3 is great for sidebars, navigation, blogs... 

Here’s what you should do: 

Step 1: Take a piece of paper, and draw a rectangle to represent your site. Then divide your 
rectangle vertically by thirds (use a ruler, or just estimate carefully). 

Step 2: Divide the rectangle horizontally by thirds. Now you’ve got a very loose grid. 

Step 3: Divide each of your vertical columns into thirds. Now you’ve got a sort of grid-within- 
your-grid so that you can actually use the 2/3-to-l/3 ratio in smaller chunks of your site, too. 

Step 4: Lay out your site, aligning things with your gridlines. 


71 
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This is the page wc built 
oh page \V) -to get 

stav-ted witli the hew 
RPA1 site- 
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layout and design 


RPM and the Golden Ratio: Aw (anti) case study 

So if the eye really likes to see things in a 2/3-to-l/3 ratio, how does 
RPM’s site stack up? We already know it doesn’t really follow any 
particular grid alignment. But what if we overlay the 2/3-to-l/3 ratio 
graphically... what does it tell us about RPM? 


badkyou^d RPM up 

a lo*t o( sysec messes y/i*bV^ 

overall 乙 。士灼七 - *to - lo 把 rat ’。 


RPM’s tolum^s v/ay o-f-p... bui 

b 叫 -things m-fco l*mc with -the 6jo\dtr\ 
Raiio dould rwakc a big di-P-Pcvc^dc. 


The y>av*iga*t'ioir> 
•is 灼’七 七 V>a 七 

SO V/C 

-f ix. 七 ha 七 v/*id*th 
fv-c*t*ty easily. 



丁 he lav-gcir bio 匕 k 

2./? of 
Chtilre width. 

丁 ha*ts wheire 

should go. 


TV^is Widest \>\ocM ⑼七付 

Wid * b ^ youv S.l 七 €• 
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sketch on a grid 



E^RciSe 


Based on the grid below, sketch out a storyboard for the RPM Music site. Try and keep up with 
how your elements are laying out, not only against the grid, but in relation to each other. Is an 
element part of the main content? Try and make it the 2/3 part of a 2/3-to-l/3 ratio. Just do your 
best... there’s no perfect answer if you keep things in proportion. 


This gHd is based oh a page 
widthdolur^h is 

with a spa^cv- o-P I 


\ 


ft n o 


mi 才 r-hJiTlI 


JLsJ 



I RfH 





Q Columns c^udls 1/^ o-f 
{\\c layout. 
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layout and design 


I think we have to do more than just make 
things the right proportion to each other. ] 

Weve got to make the important things attract ) q 
attention... so make them bigger, right? J 



Important content should “weigh” more. 

You should already be putting your most important content 
into the 2/3 part of your 2/3-to-l/3 page ratios. But is that 
the only way to draw attention to something? Not at all! 

When you’re laying out your page, you’re creating a balance 
between larger elements and smaller ones. The larger 
elements have more weight, and the smaller ones have less 
weight. Plus, there’s how the elements relate to each other: 




When you are laying out your web page, you need to consider 
two kinds of balance: symmetrical and asymmetrical. 


Symmetrical balance occurs when elements on either side 
of a line (either horizontal or vertical) have the same weight. 


Asymmetrical balance occurs when the weight of a site’s 
elements is not evenly distributed around a central line. So 
you’ve got one really large element only partially offset by 
other, smaller elements. 



Revisit your solution to the exercise on page 136. Is your layout symmetrical or 
asymmetrical? Do you think balancing (or unbalancing) your layout is an improvement? 
Make any changes you want to, and then turn the page to see what we came up with. 
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organizing page elements on the grid 



In this exercise, you had to draw a storyboard for the RPM Music site based on the browser 
grid. There’s no right answer, as long as you came up with a balanced layout that follows 
the Golden Ratio. 


The headev- v/ill span 七 he 
■top of -the page, and ihc uppev 
Ic-rt will hold "the logo. 


TV^c nav'ijatio^ y/ill 叶 2-/^ 
{\\c header <d'»v> ay\d be 
blotk-s-bylcd like tabs 




Wi-bWm i\\t 收娜 h _ 

rv\dm ton 七 C 灼七， 

used II 

^oldc^ R3*b*o fl I l_ _! 環 ■ ■ 

:工 i ifiiifiiinlllil 

f j I j 
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他 fCP€^ 
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■ 


TV 


The mdrn £.olumy> y/ill images 
Jc L? dovevs dr>d dcsdv*iftiov>s 

七 ha 七 3 。 aloy>^ v/rtK tKew'- 


The sidebav- will be a series o( ^ 
pavagvaphs and headmgs and will 
rwakc up -the \righi 1/5 o( ihc page. 
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layout and design 


Remember your personas? 


Take a second and look back at your answer on page 138. Is it 
balanced? Symmetrical or asymmetrical is okay. Did you follow 
the Golden Ratio? 

But that’s not all you have to worry about. Remember, you 
should be designing for your personas, who have some pretty 
specific concerns. 



Name: Jow 
Age: ZA 
Internet: PSl 
Music: Pop 
browser: Internet Explorer 
OS: Windows XP 
Resolution: 800x600 



you\r vc\rsioh <^f RP/1/] 
liighligli-t rwusidal ihtcircsts? 


Name: Susan 
Age: $0 
Iwterwet: Cable 
Music: Rap/Hip Hop 
browser: Firefox 
OS: Mac OS X 
Resolution: 10Z4x76S 



Bv-0>/SCV issues avc 於七 rtdW^I 

v"dcvav\*b Y c 七，^七 s ^ ccyv 

v-csolu*b>oy> C.C'rtsmlY ,s - 



Remember your clicwt? 


The RPM owner also had a lot of requirements. Did your vision 
of RPM 2.0 meet what he’s looking for? 


RPM Music 2.0 






Look over youv- 
RPM 2-.0 ideas. 
C^v\ you 
of-f o-f 

bo%cs based 
oy\ youv- dcsi^? 


Reach all my current customers. 

Update the look and feel of the site. 
Provide a blog, but as a secondary focus- 
Feature records ow the home page. 



If you heed io r^akc ^acs -fco Vou^ 
如 i 3M0 ahead/ TU J s why 丄 
wovkmg with pap% a^ay. 
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using blueprint for page layout 



So were ready to dig into 
some XHTML, right? Can we 
use CSS to actually build a grid 
that we can align elements to? 


There are CSS frameworks that provide 
grids for our content to “sit” against. 

When you’re actually building your page in XHTML, it’s 
not always easy to line things up as well as you can with 
paper, pencil, and a ruler. Fortunately, there are a lot of cool 
CSS frameworks that will provide a grid for you. One of the 
best of these is Blueprint: http:/ / www.blueprintcss.org/ 

One of the best things about Blueprint is that it provides 
an enormous amount of flexibility in terms of the types of 
layouts you can create. It also provides support for styling 
form elements and status messages — something you don’t 
see in a lot of other frameworks. 
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BJuepnnt Tests: grid.css 
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layout and design 


Setup RPM 1.0 with the Plucprlwt Framework 

Make sure you’ve got the simple version of index.html and rpm.css from 
page 128. Then visit blueprintcss.org and download Blueprint. In 
the unzipped directory, you’ll find a /blueprint folder that has all the 
files you need. You can drop the stylesheets in this folder right into the 
stylesheets folder of the RPM 2.0 site you’re building: 



\rprw -poldcv- -PoV- 
you\r RPM Z.O siic, i-f you 
have " 七 already. 


Hcvcs i\st mam 
州 W , 心讪 a 七巧 bw 
o, m -tw,s 6V,a ? W. 



/stylesheets 


Y^u should have irpm.^ss 
•(Vom C3\rr_c\r … wcVc about 
"to update it -Pov- -the hew 
VC\rsioh Jc the RP/l/I site- 




/images 



index.html 


rpm.css 



ie.css 


\c.tss adds some 
v-ulcs *to help 
Blu 叶 vi 扒七 （ a^d 

i\\t RPM site) 

▽lay 灼以 1'/ 叫 1 七 h 

lyrbemc 七 



screen.css 


sdiTCCh.te is the mdih 

-Pov all of the 
Blucpviht CSS Vulcs. 
丁 his allows you "to 
easily tYtait yid - 
layouts. 



Go ahead and create any parts of this directory structure you don’t have. Download 
Blueprint and add in its CSS files to your site structure. Then, link in ie.css and 
screen.css in your version of index.html. Use the examples that come with Blueprint as 
a model, especially for how ie.css is referenced. 


you are here ► 
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setting up the blueprint framework 



Go ahead and create any parts of this directory structure you don’t have. Download Blueprint 
and add in its CSS files to your site structure. Then, link in ie.css and screen.css in your version 
of index.html. Here’s what you should have come up with: 


/\/|akc suv"c you add 
CSS I'mb above Vile- 

TWis way, o 砍 CSS \rulcs overate 
any BluCfV-nr\*t CSS V-ulcs. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHT^L 1.0 Strict//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict•dtd"> 

<html xmlns="http: / /www.w3.org/1999/xhtml" xml : lang="en M lang="en"> 
<head> \ 

<title>RPM Music</title> 



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" 

<link rel= n stylesheet” type= n text/css" media= M screen" ^ - 

href= n stylesheets/screen.css" /> 

IE]> 


/> 


s6VCC^ ^ ss ,s 七、 
mam We. 


>e=..te X t/css>X • 


nc <! 


ie]> 


<link rel= n stylesheet" href="stylesheets/ie.css" typ< 
media:"screen, projection') 

<![endif]--> 

<link re1= M stylesheet" href= M stylesheets / rpm.css" type= n text/css 


ic te is -Pov hahdlih^ 

/htev-het Explov-cv 

di-Pfc\rCh^s. 


ovA^j 

sV^ov/s 七 V^c ic-^-ss 
-f ile -bo Wov/scv-s 
七七 \dtv\h^ 

七 hcwscWcs as 

t^loV 


media="screen" / > 

</head> 

<body> 

<div id= M wrap"> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam 
est nulla, posuere ut, luctus non, ornare in, augue. Sed ultrices 
turpis at mi. Vivamus nisi neque, vehicula vel, imperdiet a, fermentum 


vitae, purus. Donee at enim. Nunc sollicitudin sodales sem. Lorem 


ipsum dolor sit amet, consectetuer adipiscing elit. Proin ligula magna, 
feugiat ac, cursus eget, aliquet at, nibh. In pulvinar massa in sapien. 
Proin egestas. Suspendisse fermentum. Vivamus commodo aliquet libero.</p> 
</div> 


</body> 

</html> 



index.html 
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layout and design 


theve^ave no ^ 

Dumb Questi9ns 


What exactly is a framework? 

These days “framework” is really just a buzzword in 
web design and development. A framework is just a set of 
tools, libraries, conventions, and best practices that are 
designed to abstract day-to-day, routine web design tasks 
into generic modules that can be reused. The goal of a good 
framework is to allow you to focus on tasks that are unique 
to your specific project, rather than more repetitive, mundane 
tasks (like laying out a grid in CSS!). 

I get that Blueprint is good, but are there other 
grid-based CSS frameworks? 

Yup—there are lots and lots out there. Some of the 
most prominent are 960 and Yahoo Ul (YUI) Grid CSS. 

960? How does that measure up against Blueprint? 

Like Blueprint, 960 (http : //960 . gs/) provides 
a great deal of flexibility in the types of layouts you can 
create. Unfortunately, it doesn’t provide as much built in 
support for typographic styling as Blueprint. The cool thing 
about 960 is that the files package not only includes the 
necessary CSS files, but also includes some handy dandy 
extras, such as a paper template grid (based on the 960 
framework) that you can use to sketch out your designs. 


Qj What about YUI Grid CSS? 

YUI Grids CSS (http : // developer . 
yahoo . com/yui /grids /) is part of the Yahoo 
User Interface Library. Like Blueprint and 960, it provides 
a fair amount of flexibility in terms of the types of layouts 
you can create. Unfortunately, YUI Grids CSS is somewhat 
complicated, making its learning curve a little steep. On the 
plus side, the YUI Grids CSS site has the YUI Grids Builder 
tool, a visual, menu-based editor which allows you to rapidly 
create (and customize) layouts based on the YUI Grids CSS 
framework. 

I’m still a little confused about which framework to 
choose. Can you give me some more advice? 

As with a lot of things, the framework you choose is 
entirely dependent on your needs. A good rule of thumb is 
to choose a framework that balances simplicity (especially 
if this is your first time using a framework) with flexibility, 
in terms of the number of different layouts you can build. 
Blueprint is the most popular and flexible out there. But, 
honestly, give them all a try. You might find one that better 
suits your needs. Remember, frameworks are all about 
alleviating your CSS workload. So whichever one you 
choose, make sure it works for you, and you don’t work for it! 


you are here ► 
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adding content containers 


Use Plucprlwt CSS rules to style RPM10 


The dolunrm dlass is -p\rorw Blucpvmi Bv\d lets 
七 he bvowseir k^ow -to use Blucpvmi CSS v-ulcs 
-fov- posi-tioh*mg this div. 


Go ahead and make these additions to your copy of RPM’s index . html: 


With Blueprint CSS rules available, now you can go to work on RPM 2.0’s 
XHTML. Just use the class attribute on your divs, like this: 

<div id= n header n class="column span-24"> 一 

- - — - - ^ 

So the “header” div will span 24 30-pixel columns here, which is the 
entire width of the page. Within that div, you might have other divs that 
have a span of span-16 and span-8, to get to your Golden Ratio. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd M > 

<html xmlns="http :/ /www.w3.org/1999/xhtml" xml : lang="en" lang= M en M > 
<head> 

<title>RPM Music</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8 
<link rel= M stylesheet" type= M text/css" media="screen" 
href="stylesheets/screen.css" / > 


/> 


〈！— [if IE ]〉 


type= M text/css 


<link re1="stylesheet" href="stylesheets/ie.css 
media="screen, projection ，'〉 

<![endif]--> 

<link rel= M stylesheet" href= M stylesheets/rpm.css" type="text/css" 
media=”screen” /> you bo youv 

</head> a div dlasscd as w do^*ta*mCV W . 

<body> 

<div id= n wrap M class="container M > ^ 

X ^ l/l f 

_ usiha c I * D ' - s o wc 

<div id="header" class="column sparC^^)las^>^^ ^°IOCh 心右 。. 

<div id="nav M class=" column span^H^Last n >Site Navigation</div> 

<div id="mast" class="column span -24 last M X/div> 

</di V > . s z/vwi /气 ^ csc two <div>s ⑽ ?i^hdd^s 

a toU j s ? a^l^*tovcv. 

<div 冰~” 一’一 一 ^ C ~ iv> 

<div id="sidebar" class="column span- 8 )last M >Sidebar Content</div> 

</div> 


sooh. 



<div id= n footer n >Footer Content</div> 

</body> 

</html> 



Bach majov- site a dlass ^ ^ 

value This WU Bluf mUo>/ *to position 

element T\\t sMcmd value (span - — +vamcy/ovk 

dolui^^S *bo spa 於 


index.html 


1/VcVc s-till wo\rk*m5 th 

•mde 乂 .hH -file. 


c 
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Time to get your RPM groove ow 




Can I see what the site 
would look like with some 
of my records in place? 


At the Party with Hector Rivera 

Hector Rivera, the king of New York Latin Soul, really makes a splash with his 1966 
release “At the Party” climbing into the R&B Top 40. This classic album will have 
you dancing all night long and is sure to become one of the favorite records in your 
collection. 


Hawaii with a Bongo Beat 

LeRoy Holmes has done it again with this Hawaiian-Nashville fusion album, sure to 
take you back to the islands or the country. Pick up this record and listen to your favorite 


tropical classics, like “The Moon of Manakoora” and the always delightful “Mahilini Mele.” Great music for 
the whole family. 


Dreamin’ Wild 

The hunky duo of Donnie and Joe Emerson bring you this psychedelic rock album for the ages. Their smash 
hit “Don’t Go Lovin’ Nobody Else” will have you humming for days. This is a collector’s item and is only 
being offered for a limited time here at RPM Music. Get it while it’s hot. 


XMAS A Go Go 

This week’s mystery LP looks to be a great addition to any Christmas music collection. This just showed up 
one day in the RPM Music warehouse, and we’ve priced it to sell. Get your piece of mystery history with 
XMAS A Go Go. 



Add the above content to the main <div> of the RPM site in the index.html file you’ve 
been working with. Think about ways to insert your content to match what it is: a bunch 
of similar items that aren’t ordered, but may need to each be styled. You can download 
the album covers from Head First Labs: 

http : //www.headfirstlabs . com/books/hfwd/ch04 


you are here ► 
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content vs style 


Fireside Chats 

華搴 


Tonight’s talk： Who’s more important to the user? Content 
and Style discuss who matters more when it comes to the 
user’s experience. 


Style: 


Content: 


You know, I really don’t think that there’s much 
to discuss here. I mean, the Internet is a visual 
medium, and people want something nice to look at. 
No one is going to care about the content if the site 
doesn’t look good. 


Yeah, back in the way early days. But today, style 
and design are the branding of a site. They’re what 
gives a site its character and personality. 


Nothing to discuss? How quickly you forget the 
humble origins of the World Wide Web. Berners- 
Lee proposed HTML to help researchers share and 
update information, specifically scientific research. 
Content was king back in the early days. 


True, but even well-designed sites with the most 
cutting-edge CSS won’t hold up without well- 
written content. Graphics and one of those fancy 
three-column layouts can only get you so far. I 
have to be clear, short, and easy to read. Otherwise, 
people lose focus. And don’t even get me started on 
what happens if I can’t answer the questions visitors 
are looking for. It’s a lot of pressure! 

Well there’s just as much pressure on me. What 
about navigation? Huh? If I don’t get people from 
one part of a site to another, they’d never even find 
you. Not to mention screen size, text size, and the 
usability of all these things I’m doing. It’s quite a bit 
to manage and not as easy as you may think. 

Navigation? An unordered list and some text links 
should do just fine. You graphic designers... 

What is this, 1995? Unordered lists and text links 
without CSS? Boring. 
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Style: 


Hey, who invited this guy? 


I told you, we don’t talk about that anymore. We 
were all young and stupid then, with a complete 
disregard for the separation of markup and style. By 
the way, where’s Content? 


So that was good? Now that I live in CSS 
documents, I’m much more useful and not so 
bogged down by all the stuff that markup is doing. 
It’s definitely better for me. If anything, I’m really 
doing you a favor, too. Now you get to stand alone... 
for whatever that’s worth. 


Is that supposed to be a compliment? You know, 
it has been a lot easier for me not having to deal 
with all your <p>s everywhere. Just don’t forget to 
include me in your head. 


Content: 

〈 markup 〉 

Style, are you still complaining about Content? 
Don’t you remember when you were right there 
next to him? I helped you get there with tags like 
<font>, <i>, <b> and <table>. 

</markup> 

<markup> 

Stylesheets are great, but remember how it used to 
be? Endlessly-nested tables, markup filled with hex 
colors, and the always lovable spacer GIF. 

</markup> 


Sorry, that markup guy has a tendency to follow 
me around sometimes. However, he makes a valid 
point. You used to be just tags in the HTML mess. 


You have cleaned up the files quite a bit by moving 
into the / stylesheets directory. It really has 
given markup and me a chance to get to know 
each other better. It’s amazing what you can do 
without all your meaningless style tags all over the 
place. 


you are here ► 
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adding style to the rpm content 



Here’s how we marked up the album covers, descriptions, and titles in our version of RPM 2.0. 
What did you do? 


<body> 


<div id= M wrap M class= M container M > 

<div id= M header M class= M column span-24 last M > 

<div id= M nav M class= M column span-16 last M >Site Navigation</div> 
<div id= M mast M class= M column span-24 last"></div> 


TWis is \rcall7 
\\Asi a list o-f 

albums, so 

y/c used a 朽 

\AY\ordtrtd 

lis 七 （ ul). 



</div> 

<div id= M content M class= M column span-15 colborder last M > 

<h3>New at RPM Music</h3> 

<ul> 

<liXdiv class= M column span-4 n Ximg alt= M cover 1 


忪 dcs^iptio, -texi 


his 


src= M images/coverl. jpg" /X/div> 

<h4>At the Party with Hector Rivera</h4> 

<p>Hector Rivera, the king of New York Latin Soul really makes a splash with 
1966 release <em>At the Party</em>. Climbing into the R&amp;B Top 40, this classic 


album will have you dancing all night long and is sure to become one of the favorite 


records 


in your collection.</p> 

</li> 

<liXdiv class= M column span-4 M Ximg alt= M cover2 
src= M images/cover2. jpg" /X/div> 
<h4>Hawaii with a Bongo Beat</h4> - - - 


Album ttlcs rn a 七 

" (v^) *bo 'ma'itatc 柹 w awd 

Ic-t us 七 us'm^ ouv CSS- 


<p>LeRoy Holmes has done it again with this Hawaiian-Nashville fusion album 


sure to take you back to the islands&mdash;or the country. Pick up this record and 


listen to your favorite tropical classics like "The Moon of Manakoora" and the always 
delightful "Mahilini Mele. M Great music for the whole family.</p> 

</li> 


<liXdiv class= M column span-4 M Ximg alt= M cover3 M 
src= M images/cover3. jpg" /X/div> 

<h4>Dreamin , Wild</h4> 

<p>The hunky duo of Donnie and Joe Emerson bring you this psychedelic rock 
album for the ages. Their smash hit "Don't Go Lovin' Nobody Else" will have you humming 
for days. This is a collector's item and is only being offered for a limited time here 
at RPM Music. Get it while it's hot.</p> 

</li> 

<liXdiv class= M column span-4 M Ximg alt= M cover4 M 
src= M images/cover4. jpg" /X/div> 

<h4>XMAS A Go Go</h4> 

<p>This weeks mystery LP looks to be a great addition to any Christmas music 
collection. This just showed up one day in the RPM Music warehouse and we've priced it 
to sell. Get your piece of mystery history with XMAS A Go Go.</p> 

</li> 

</ul> 

</div> 


<div id= M sidebar M class = M column span-8 last M >Sidebar Content</div> 
</div> 

<div id= M footer M >Footer Content</div> 

</body> 
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Tesr DriVq 


How，s RPM 2.0 looking? 

Update your version of index . html, and load it up in your browser. 


layout and design 


add some sbj\t b> ^ csc 
V,sts b> sV^av^v' 从 cm 叶. 

l_ : 





Add some CSS to clean up the layout 


Some simple additions to rpm. css should clean up things considerably: 


P/ ul, 

} 

h3 { 

} 

ul { 


li, hi, 
margin : 



Zcv-o oui the mavg’m -Pov- 
sorwe Con\n\OY\ page derwe^ts. 


margin : 0 0 2 Opx 0; 
padding : 0 0 5px 0; 
font-weight : bold; 
border-bottom: lpx solid #ccc; 



rpm.css 


list-style-type : none; 

} 

#content, #sidebar { 

margin : 4 Opx 0 2Opx 0; 

} 

#content h4 { 

font-weight : bold; 
font-size : 1.4 em; 

} 

#content li p { 


/ 


The ul ay>d #doy>*tcr>*t rules will V>clf ouv 
vedovds stvai# 七 ⑼ ed ou*t- lis*t—s*tylc—*tyfc ： 

Vf'ill globally v-emove bullcis -f\rom album list 
Usually bullc*U av*c good, bu 七 m 七 his dasc >wc Aoy\{, 
V/ 扣七七 ^>€ 你 . 丁 ilC 0*tV>CV irw^Ovt3ir>*t V"ulc ilCV'C IS 
bo*bbom m3V*^iir> oy\ 养乙 oirrtcirvt I.i f TV>is V*ulc ^^kes 
suv-c tat\\ <\\> stacks widely oy\ *tof of Ac oi\\trs. 


margin : 0 0 7 Opx 0; 


you are here 
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finalizing rpm’s content 




Tqst DriVQ 


RPM 2.0(1) is ready to test. 

Update your version of rpm. css, and reload the RPM site. 


botW border artd stylmj 
up ^c settlor Vicadcrs a^d sefavate 
^v-om V^cadcv-s y/’rtWm *tiic doyrbcrrt. ^ 




衿 n P 

I ~ 

yjAA&jbiBiisL 


NirW Ot RPM HU3iC 
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A 嵬 tho Party wHh Hfrctor Rivem 

Hfoiw nwmfevtaol HmYt^ La>nrnaw ■ van quintal 

Rwy. ilmRABTap 说 eta dwe rnu^wM 


I auraT 


n^VicsCimn 


3时 anvaU with a Bongo Dfiat 

LA)>y IW4CAI4 igi 

m WflTKH 


H^iw IwwNif loin vih _ Km •聊 Ni 

ncxifiui 


m DriM DEk w rrpi mncB ixr^ C£vmF)p 
d 梅 _ 

HMhinilA^. 


P^lt iMhlfl 
dtfrstrHd a M 


hS m mir Tnr^mw 


A little simplistic, but I like it. 
Sort of like Amazon.com, but I’d 
rather shop locally, anyway. 



Dnanfiilii^ WJd 

DamltnJiM en^g 界 kj rack 

ibaff 1 Apr 两 •■grp Tt^-■*»■§« h>x 'Pp^tOq nM 刺 

HMTwni^, for fTu mm pab^Vi ^mn bang tf^wmi Ysr p 

hnft^frna h»iC muUAiHC Otn mt^p rfi_. 



A Go Go 

rr^iwy LPm>ol>alb Hi-fino: MYf Cfmmmmmc 

HAaoL^n Ttmpm mom^ ^ RP 槭 Uyi^ iwiti^yMiHid 

Fn_d ti Hh^l^ir^npfrnnESarf hnSa^ Hlh 1^4?- 
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::; r 


a modest below the <P> iaa 

匕 h o + the v ^ o^rl ▲一 /> . 


mov-c 


ovdcvly. 
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Fiwish off the cowtewt and wavigatiow markup 


Let’s add a little more content to show the RPM owner just how far 
we’ve come. Make these changes to your copy of index . html: 

<body> 

<div id= M wrap M class= M container"> 

<div id= n header" class= n column span-24 last M > 

<hl class="column span-8 last n >RPM Music</hl> 

<div id= n nav" class= n column span-16 last M > 

<ul> 

<li class= M active n Xa title= n RPM Music home n href="# M >Home</aX/li> 
<liXa title= M Music Store" href="# n >Music</aX/li> 

<liXa title= n RPM Blog" href ="# M >Blog</aX/li> 

<liXa title= n About RPM Music" href = M # M >About</aX/li> 

<liXa title:，'Shopping Cart" href="# M >Cart</aX/li> 

</ul> 

</div> 

<div id= n mast" class= n column span-24 lasf'Ximg alt="rpm guys" 
src= n images/rpm—guys . jpg" /x/div> 

<div id= n subheader” class= n column span-24 last"> 

<h2>RPM Music is the #4 online, midwest, <em>shrink-wrap</em> 
music retailer</h2> 

</div> 

</div> 

<div id= M content" class="column span-15 colborder last"> 


Sc 



<h3>New at RPM Music</h3> 

<ul> 

<!-- Album listings from earlier --> 

</ul> 

</div> 

<div id= M sidebar" class= M column span-8 last"> 



These av*c sample bloj eivbries. La-tcv*, wc 

tould pull these p\roav-arwrwatidally -fv-orw 
"the Wo 少 b“ 七尤 o\r now, s-ta-tifi . 七以七 

lets us show wha 七 "things will look like. 


<h3>From the Blog</h3> 

<pXstrong>Nov 4</strong> &mdash; RPM is gearing up for the holiday season and 
stocking up on lots of records for the post-Thanksgiving LP rush. We should be flush 
with inventory and we suspect that we'll have some cool new specials to announce later 
in the month. Check back soon for the holiday RPM madness.</p> 

<pXstrong>Oct 20</strong> &mdash; We just received a mysterious package in 
our warehouse full of Christmas albums that seem to have originated in Japan. We are 
currently investigating their origins and if everything checks out, we'll have them up 
on the site for purchase. Could be the makings of an RPM Music exclusive.</p> 

<pXstrongX)ct 7</strong> &mdash; New specials are up on on the site as of last 
night. Be sure to check out the LP A s that offer free shipping.</p> 


</div> 

</div> <!-- end "container" div --> 
<div id= M footer"> 


<p>Copyright &copy; RPM Music, all rights reserved.</p> 


</div> 
</body> 


A dopyvijh-t ⑽ tide is all we v\tcd \v\ -the -foo-tev -Pov- riglvt 灼 ow. 
No 七如 七 ha 七 "the fooiev <div> is outside -the 你 am This lets 

us S P 如七 he (ooitr across ihc c^ii\rc bottom of 七 he page. 



index.html 
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vertical ratios 



o 


i 



Vertical ratios usually require images 
and CSS positioning. 

It’s relatively easy to get your horizontal ratios right using a 
CSS grid framework like Blueprint. But how do you get a 
vertical ratio going, like between a main header image and 
the rest of a site’s content? 




bo \/^> o-f 
vcv"*t»^sl spate … 

.從:。 



You can start by sizing your image to take up about 1/3 of 
the typical user’s vertical screen real estate. But then you’re 
having to use a lot of different images, and possibly even 
the dreaded 1 -pixel transparent spacer. And what about the 
parts of the page within the header: a navigation bar, the site 
logo, any headings... it can turn into a mess — fast. 

A better solution is to put together a background image that 
has things in the correct proportions, like this: 
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This imoi^C will be 
vcfca*tcd advoss 七 he 
•fcop of fay) 
dvca*tm<j ^ U *fau% w 

VO>MS ok dolov- *tKc 
y>av*i^a*tio^, 
iicadcv- body ar>d 
七 he 



r 


n q rj 


: r ，， + ■■ 


^00^% 



You 63^ a 代 I 7 7 ouyr 
yule *tW»^ds *to 
CVCV^ -tw»s tm7 1?^ 
v/'ide Way. 


This a wide 

咖吵… A a v 饮 y 

hdlrirow ir^e 
^esied ovc\r snd 
hoirizoirt^||y. 


over 


TVis is the ovcv-all 

badk^rouhd dolo\r o-p "the 
site fbclow the header). 


body 



TKc If% i^a^c 七 “a 七 

Will be v-cpca*tcd ad\ross 七 he 
•tof <^f -the fa^c 


background : #fbf9ef url(../img/header 一 bg.gif) 

repeat-x top; 


} 



TKis bit o( 匕 ode will cascade Kcadcv^bg ji-f 
advoss 七 he *tof o( *thc fay. 


you are here 
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block hover navigation 


Add layout and typographic details with some more CSS 

Here are some more CSS rules to help clean up and format all the new 
XHTML you just added. Make these additions to rpm. css, too: 


body { 

margin : 0; 
padding : 0; 

background : #fbf9ef url(../images/header_bg.gif) repeat-x top; 


p, ul, li, hi, h2 r h3, h4 { 
margin : 0; 

} 

h3 { 

margin : 0 0 20px 0; 
padding : 0 0 5px 0; 
font-weight : bold; 
border-bottom: lpx solid #ccc 

} 

ul { 

list-style-type : none; 

} 

#nav { 

height : 50px; 



#nav ul { 

float : right; 

} 

#nav ul li { 
float : left; 
padding : 15px; 

} 

#nav ul li a { 
color : # f f f; 
text-decoration : 
padding : 15px; 
font-size : 1.2em, 

} 

#nav ul li.active, 
background : #333, 


This posi-tio^ma will "the “'tabs " 心 

stay oy\ -the v-ijhi side o\ the layou-t. 


f\ padd'm^ or\ 七 
y>av l'i Will jive 七 he <a> 

*taa room *bo yro^i d 灼 d 

-foVm ouV blodks. 


none; 


#nav ul li : hover 


TW»s Will 

4a 七 ce <a> *ta v s " 
classed 七 Wc. 

TWis lets use” kwoY/ 

- 4a 七 ?ac\c a^rc o^. 


Jus 七 addm^ a CSS v-ulcs will 
^ive us d hid-C—lookmj, 

y>dv'i^d'b'ioy> "that also makes 七 he 

S*rtc casicv *fco use. 


細 ast img { 

float : right; 



#mas*b W is 如 Wrn image m i^cadc\r. 

\Mt y/a^t 4is bo ^loa-t over on tv^c \ri 吵 t 

side o-f *bV^c p 3 y* 
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layout and design 


#header hi { 

padding : lOpx OOO; 
font-size : x-large; 
font-weight : bold; 
color : # f f f; 



#header h2 { 

margin : 8px 000; 
text-align : center, 
color : # f f f; 
font-weight : bold; 


，h ^ _ 蚴 I.This 


#header h2 em { 
color : #ccc; 


#content, #sidebar { 
margin : 4 0px 0 2 Opx 0; 



rpm.css 


^content h4 { 

font-weight : bold; 
font-size : 1.4 em; 

} 

^content li p { 

margin : 0 0 7 Opx 0; 


#sidebar p { 

margin : 0 0 lOpx 0; 


#footer 


<e 


border-top : 5px solid #928977 
background: #a9a2 94; 


#footer p { 

margin : 0 auto 
padding : lOpx; 



width : 95Opx; 

font-size : 1.2 em; 
font-weight : bold; 
text-align : center, 


TKcsc v-ulcs -for ihc Cooler >w*ill alloy/ *i*t *to ihe 
bottom of s*rtc, ouisidc ihc yr^A dor>*ta*mcr. 

-the same as yr\A a^d i\\t 

UY\itY\i Vi 七 h mav^m: O au*to ^Wcs us i\\t layout >wcVc 

look'm^ *fov. 


Focus on design, not the CSS. 

^ I fs oka y if y° u，re not 100% sure on all these CSS rules. 

’f ■ You can pick up Head First HTML with XHTML & 

CSS for more details. For now, focus on the look we’re 
creating, and how it’s balanced, organized, and follows the Golden Ratio. 
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test drive 




Tesr DriVq 


t 


Kov/ RPM looks l.k 

\i bclo^y tW«s 

s.,de o ⑽'办 d •， 七 


—*b> 从 c c 7 es . Ano 


RPM is ready to go live. 

Update index . html and rpm . css, and download any images you don’t already 
have from Head First Labs. Then see what all your work has produced: 


s 







New at RPM Music 



At tha 

Hipar^rw 一 
19 fi«rcipKPAli 
hnq 

in ycu 如 laci_ 


Wow. I may never leave home again. Why 
bother, when I can order direct from RPM 
online? Slick site... 


l-TRJPi 

I Ifi/mifi Q 

I mol new 5poa 


gm vid 


1^^ rradrtifwa, 


_Nas>hvilhi ftnuKi dEur 3 utw 


Hawaii with a Beat 

UrftoV Mrimffl hn ihxM-it van wf；h INi htnnii 
louhfiy&u eic^n^e It'HH-arrh# »ymTy. ReH yp m* m6 lliwn 

pur l.ivwln Ciopipal cIkvca "kb B Thii Uxriol vml IIm 虛袖 


tkrighHurbUiillnnVW^ 


I imik fw ll^ wfid i-Ini If. 


■ Wh I ml mdmi ■ rryalwlJCM 
C^i^nm fibumi due 」 
Cm->n^| 4C] JqpiP, W« Wl> DLirmit 
ixH^ro «Kjlf Bnrjflhln^ cfwcka 
pn m*« pyroiKA CojUI 

PAis< wdywra-. 

On 7 - HWf ipfttiaa jrtup 
ni_ EIa Hojr*s^ ifmx. chie d; 
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layout and design 


This looks amazing! I never 
would have thought you could 
nail this so quickly... and 
Tm already getting positive 
responses from my customers. 



BULLET POINTS 


■ 


A survey is an excellent way to get broad information 
about your audience. 

■ A persona is an archetype user that embodies and 
represents your audience. 

■ Screen real estate refers to the amount of space 
on the screen of the device that the designer has to 
work with. 


■ 


■ 


■ 


The lower your resolution, the larger items will be and 
the more screen real estate they will take up. 

A grid can provide order and visual logic when you 
are designing your layout on paper. 

The Golden Ratio can produce designs that are more 
pleasing to the eye. 



■ The rule of thirds is a quick and easy way to create 
grids that are based on the Golden Ratio. 

■ A CSS grid-based framework is a specialized CSS 
file that contains all of the necessary styles for laying 
your site out along a grid in CSS. 

■ The goal of a CSS grid-based framework is to allow 
the designer to focus on tasks that are unique to their 
specific project, rather than reinventing the wheel 
each time around. 

■ Block hover navs provide users with information as to 
where they will end up when they click on the link. 


CHAPTER 4 
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5 designing With color 


Moving Beyond Monochrome + 



your audience into your site, give them a powerful feeling of immersion, and keep them 
coming back for more. And when it comes to color and web design, it’s not just about 
picking a good color palette, it s also about how you apply those colors. You can have a 
great color palette, but if you don’t use those colors thoughtfully, people might avoid your 
site like the plague. By the end of this chapter, you’ll not only be intimately familiar with the 
impact that color has on the web user, but you’ll also be able to choose a great looking 
color palette that fits in — and even complements — your user-centered websites. 


this is a new chapter 
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9Rules 


Help support your local music scene 


The site you designed for RPM Music was a big hit. Sam, the store owner, has received 
such good feedback that he wants to extend his reach and create a new site called 
SampleRate that offers coverage of the local music scene — and he wants you to design 
his new website. The thing is, Sam has got it in his head that he wants the new site to 
be part of the 9Rules Music network (http:/ / 9rules.com/music) . If this new site 
is chosen to be part of the network, it would mean a lot of exposure for the store and 
the site (and you as a designer). 



Saw, RPM ovm^r 


SampleRate is the 
perfect complement to 
RPM's online store. But the 
SampleRate site has to be top 
notch... rm counting on you! 
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designing with color 


9Rules: The blog network gold standard 

In today’s web, blogs are everywhere. The problem is that there are so many that 
it’s hard to know where to find the good ones. That’s where 9Rules comes into the 
picture. 9Rules (http://9rules.com) is a cross between a blog aggregator and a blog 
network. It syndicates the posts of its members (which are conveniently organized by 
topic categories, such as music, photography, science, design, and games) and provides 
a one stop shopping spot for those wanting to find top quality blogs. 



■ WpJ ； 


9rul@s 


Cl. 




EferiiwiiB By faTT^irMTffr — 




CfhrTkE'ilunlrty ^ ^ - 

Flr 4 <npw ituu brife ruec^ p_ jn 




I P iOfl I 




hffl rOPD GufaVI iT^WDn VOilrijtal 

# PI H 'M B. . »i 

Ortoora Qulir ■ MODS^afda 

Etetm Ffuct«i3 Bibigii four VcbkT rna^ ^oda^ 

㈣ rpftMi _ *?iM giftai' ' 

'■fahB !■ JtafHi I 1 ^1 

Fww^iwy^tg , 


Rf?v*¥i EiiLMwvmn 




,■^"1 P WriAf IbtM b»kl» 



9rules 



SampIcRa-tc oy\ -the 

IRules /Wusi^ site will meah lois 
^ ahd potch-tial business 

^ the RP/W /Wus'ui sWc. 


So how do we get SampleRate onto the site? Periodically through the year, 9Rules has 
a 24 hour submission process. During this time, site owners can submit their blogs to 
be reviewed for membership. On average, 9Rules only accepts about 30 or 40 sites 
per submission round (out of thousands). The bottom line is that getting accepted into 
9Rules is a huge deal and the goal of many designers, content producers, and bloggers. 

It takes more than just a great design to get on 9Rules. What 
are three really effective way to get a site noticed online? 
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samplerate’s challenges 


Sometimes your choices area bit... limited 



Sam loves your storyboards, but there’s a catch: he’s already got a logo for 
SampleRate that he loves. No matter what else you come up with, you’ve 
got to make the new SampleRate site mesh with the existing logo Sam’s 
picked out. 

That means we’ve got some choices taken care of for us, like colors. Take a 
look at the SampleRate logo... what will this dictate about our design? 


^ the lo 9 o that 
s sci Oh usihj for 


: as SampleRate 


TWis is a take a 

^ fov us, »t sets 

^ dolors v/eve U {o ^ 
^ rtsi ok Site 


\ Sarw Pcv-soir>ally ^hosc -this 

(bCc, so y/c may v/drrt 七 0 u: 
tha-t -Po^t v/i 七 hm 七 he si-tc, -too. 


Sam loves 七 he idea o( some kmd 
o-f visual m headev-. 


丁 he SarwpIcRa-tc desi^ is -faiv-ly 

st\rai5hi-Povy/avd : OY\C ma'm dolur 

•(W wrth a Ic-Pi-alij^cd 

sidcba\r -Pov dddi'tioiDdl devils. 


n\f\ 
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designing with color 


Color has an emotional impact 

So how did you feel when you first looked at the SampleRate logo? No matter whether 
you liked it or hated it, you probably felt something. That’s because color creates 
emotion. For example, red is associated with excitement, purple is dignified and 
stately, yellow is cheerful, and blue is associated with comfort and security. 

When we’re designing a site that involves strong colors, we’ve got to think about the 
emotions those colors generate. Pages that use color well have a feeling that you don’t 
get from sites that don’t consciously use color as a design element or that use color 
poorly. You should treat color as an element, one that’s just as important as navigation, 
images, or content. 

Take a look at these bold colors and the sites that use them. You can’t help but have a 
reaction... and that’s what we want with SampleRate: a strong, positive reaction! 
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the emotional impact of color 




E^RciSe 


Take a look at these four screenshots and write down what you feel when you look at them. Use 
any kind of descriptive words you want. Excited, playful, happy, sad, curious—whatever you feel. 


O freshairapps.com 





JtL 




fresh AIRdpps 



O bigbluedev.com 


i- ■ - 1 ?. 


BIG 

BLUE 




i h31 ^ 






H I- -i— - i i 

BBBK* 
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designing with color 


❺ caxtowstrcetfcstival.cow.au 



O le-moulin-desauvage.com 
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color and emotions 



Colov- IS fv-okably smjlc 州 os 七 imfortarrt 
des'i^ clcmc^-t ov\ tWis page- lAA*tW 七 *tW 
liaK-b blue (v-cpv-csc^tmj *tiic sky), *t^c pajc 
loses ^ a,d tV, c e^e Vsual 

bv"C3ks do>WK\. 


o 


Q 0 




The \red m this site takes ihc toW of the lobs 七饮 and uses 
it 3s -the -fourwlatioh Co\oy -Po\r -the whole f>do^e- The f>a^e is 
(\AV\, a^d \rcp\rcscir>ts -the pcv+cdtly. 
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designing with color 


The color wheel (where it all begins) 

Before we can even think about what colors we’re going to use for 
SampleRate, let’s get acquainted with the mother of all color tools in 
the design world: the color wheel. The color wheel (or color circle as it’s 
sometimes called) is a circular diagram that displays different colors and 
shows the relationship between those colors. 

Those relationships are key... and the color wheel lets us choose colors that 
go well together. Let’s start by finding some of the colors in the SampleRate 
logo on the color wheel: 


■IIIIHIU _nipleRate 


The \rcd 3hd gvcch ih 
"the logo 

价 c located a^voss -fvom 

eaA othev- on the wheel 
如 d Irc-Pcirlrcd io as 

dolors. 



The y/iiccl »s bdsed oy\ 
p\riw>dV"Y 6olo\rs 
(v-cd, yrtcv\, blue )， 
sedo^dav-y dolov-s (yellow, 

cs^y\, a 灼 d s ’》% 

C.olo\rs -formed by 
{}\t -two. 
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the color wheel in action 


Sharpen your pencil 


Take a look at the sites below and circle each site’s main colors on 
the accompanying color wheel. Once you’ve circled the colors, try 
drawing lines between them. Notice any patterns? 



TW EintH STKEE 


SMFOOD =ESTIVrtL ^n»r；IC 


Civile cvev-y major to\or , 
v*cfv*cscir\*tcdi po 於七 

y/orv-y i*f *b^c dolo/s r\o*b jwt 

yb as c\ost as you ov\ 


rn>^F*i.n¥ f |i ^rns 


L02 


HAS BEGUN! 
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designing with color 





we 




L-Xi；> 


§a mdn I 


tw\m Ai: 






hib«r|efnefli 


T_ J.Bfaoid, Li priH dF^vi ivdr»4# 

jsm PMlfpf rHttrt-fui 1 wlr ‘ 




hlMTCMl rKHCtelHT^ 
_ 戽 MmlM _ k 

lm Ta r feini! t ■ 


you are here ► 


169 


































identifying color patterns 


Use the color wheel to choose 


colors that "go together" 


You might already be thinking, “Yeah, the color wheel is cool and all, but 
how do I use it to actually pick colors that work together and don’t look like 


a dog barfed on my web page?” This is where color schemes come into 
the picture. Color schemes are more than just collections of colors. A color 
scheme is a certain grouping of colors that goes well together. 


And here’s the kicker: all good color schemes start with a single color and your 


Sorwciirwcs you’ll hcav- 

an mdividual Co\oy \y\ a 



丄 Mtniliu if.. 

^Sauvage # # , 


{\\t base Co\or 


TV^is 


IS 


-fov" *tV^c Lc Moulm s'i*bc- 


First choose your PASE color 


sdheme called a “sy/aidh" 

o-f dolov*. 


handy-dandy color wheel. 


The site above has a fairly deep green all over the place. That’s the base color 
of the site: the color that most represents the visual metaphor and that all other 
colors are based on. For SampleRate, we’ll need to begin by choosing a base 
color. Then, we base everything else — other colors, their depth, their hue — off 
of that base color. 


But don’t get too stressed out! There’s no right or wrong base color... and you 
can always abandon a scheme that you end up not liking and start over. 
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designing with color 


Use the triadic scheme to create usable color patterns 

Color schemes come in all shapes and sizes — and they all have fancy-sounding names 
(monochromatic, analogous, complementary, triadic, tetradic, etc.). Don’t worry, once 
you get past their names, they’re really just pretty simple ways to pick different kinds 
of color palettes that you can use for your site. Think of color schemes as just another 
helpful tool in your web design toolbox. 


The triadic color scheme is 

one of the most commonly used 
color schemes around. Triadic 
uses three colors, equally 
spaced around the color wheel. 
So once you pick your base color, 
you can just draw an equalateral 
triangle (three equal sides), and 
pick your other two colors: 


all dolors'm a 

■briadk sdiicmc arc equally 

tolor m falc*b*tc 

be base. 



七 viada 

cadV^ 6olov should 

be —17 

around 

buWs out 細 C, 
姐 ， s IZO Atyrtts 

all 



Create a three-color palette based on the SampleRate logo that Sam provided. Make sure you 
start with a base color and build your palette from there. 
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triadic color schemes 



We used the deep green as our base color... and came up with the palette below. What colors 
did you choose? Did the combinations surprise you? 



: rr : 碑 

or. our toW v/V^CCl. 


Bo-th -these Colors av-c about -tKc 
如 disWe 4o, ou, base 


SampleRate 



Did it surprise you that some of the colors in your triadic 
scheme were so different from the SampleRate logo? Do 
you think that’s a problem? 
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fret started ow the SampleRate markup 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http : // www. w3 . org/TR/xhtml 1/DTD/xhtml 1-strict • dtd，，> 

<html xmlns= M http :// www.w3.org/1999 / xhtml" xml : lang="en" lang= M en M > 
<head> 


S*bri 乙七 deader 



<title>Sample Rate</title> 


<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 
<link rel="stylesheet" href="stylesheets/screen.css" type= M text/css" 


media="screen" / > 

</head> 

<body> 

<div id= M header"> 



Make su\rc -to mdude you\r siylcshcct, should be 
lodaicd *m a di\redx>\ry called /s-tylcshccts. 


<div id="logo n ><img alt="sample rate logo" src="images/samplerate2.gif" /></div> 
</div> 

<div id= M nav"> 


<ul> 

<li><a 

<li><a 

<li><a 

<li><a 

<li><a 


class= M active 

title= M title" 


title="title" href="# n >Home</a></li> 
href= n #">Archive</a></li> 
href= n # n >Music</a></li> 
href= n #">About</a></li> 
href= n # n >Contact</a></li> 


</ul> 

</div> 

<div id= M wrap"> 

<img id="masthead" alt="header image" 


This is ihc guitar image 七 ha 七 the oymev 

-to see ov\ ihc siic- 


src= n images/gitfiddle.jpg" width="740px' 



<div id= M content M > 


<hl>Heading One</hl> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusee 
consequat arcu in mauris.</p> 

<hl>Heading Two</hl> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusee 
consequat arcu in mauris.</p> 

</div> 

<div id= M sidebar n > 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusee 
consequat arcu in mauris.</p> 

</div> 

<div id= M footer"> 


V® u My "to 
add some move 
dummy text -to -fill 
"the 3 is wc 

add to\oY ahd s-tylc. 


<p>Copyright &copy, 
</div> 


SampleRate and RPM Music, all rights reserved.</p> 


</div> 
</body> 
</html> 



index.html 


Typing-challenged? Go online! 

J/ If you don’t want to type all this in, you can download 

• /丄 the SampleRate files from the Head First Labs website. 

You may want to work through these examples on your 
own, though... who knows what you might learn in the process? 
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finding hex values with kuler 


Create the basic page layout with CSS 


body { 

margin : 0; 
padding : 0; 

font-family: Verdana, sans-serif; 

} 

hi { 

margin : 0 0 5px 0; 


^content { 

float : right; 
margin : lOpx 000; 
padding : 0 20px 0 20px; 
width : 54 Opx; 

} 

#sidebar { 

float : left; 



screen.css 


margin : 0 0 20px 0; 
line-height : 1.4 em; 


#header { 

margin : 0; 
padding : 2 Opx 0 




margin : 2 Opx 0 0 0; 
padding : 0 20px 0 20px; 
width : 180px; 

} 

#footer { 

clear : both; 
text-align : center; 




#header #logo { 

margin : 0 auto; 
width : 800px; 

} 

#nav { 

background : #ccc; 

} 

#nav ul { 

margin : 0 auto; 
width : 800px; 
list-style-type : 

} 

#nav ul li { 

display : inline; 

} 

#nav ul li a { 

text-decoration : 

} 

#nav ul li a.active { 


TW»s CSS v/«ll sewe 
as 

layout Laity, ^'' add 

move toW some 

dc*ta»l *to ^ ^ 

a ^ our 


#footer p 


none 


none 


#wrap 


margin : 0 auto 
width : 800px; 


Like done bc-fovc, 
use mairgih ： O auio h> 

-the layout ih the 

bvowsev-. 


細 asthead { 

margin : 


2Opx 2Opx 0 2Opx; 


Remember, \i boavd Saw> 
|*,kcd... here’s y/Viat wcVc jomj W 


dliuhks below -flo3*tcd 
<div>、must be dlcav-cd so they 
a PP ca,r below those clcmchts. 
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designing with color 


Great, Ive got circles on my 
pretty little color wheel. How do 
I turn that into CSS? I need those 
funny hex values, right? 



O 


0 




We need a digital color wheel. 

CSS requires hexadecimal values for all but the most basic 
colors. Hex values are 6 characters long, like #572266. A 
hex value tells the browser how much red, green, and blue 
to display. So we need a way to take the values we chose 
on the color wheel and turn them into hex. 

Fortunately, there’s a program perfect for the job: Kuler 
(available at kuler.adobe.com) . Kuler not only has a 
digital color wheel and hex-conversion tool, it lets you 
check out other people’s palettes and even export your 
own palettes. 




Ou\r fsruili 


3}r ^o\oy wheel 



Color 



Slidcv-s alloy/ sw> all 

adjus*tmcy\*b -to dolov-s, 3r\d 
au*tomat^allY adjusts 
youv* o*tV^CV" £.olo\rs *to -nt 
Co\oY you VC Aos 


Stop! Go load 
Kuler hy going 
to l^uler.adobe.com 
now. You’ll see it 
iJiToughout the rest 
of tire chapter. 
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kuler in depth 




K«kr J]p Cl^se 


)^Ale\r’s CoW wheel lets you micvadiivcly 
sclent base Colors av\d 七“的 build 
palettes with di-P^cv-c^i schemes. 


丁匕 slidcv view lets you adjust CoUs 

⑽ 






LMl 


hsv [TaT| fT?~| fTr~| 

RGB 3 ] [~ra~| [~g~| < 

■ [~?7~| [~5~| [~aa~| fW 

LAB [~23~| pM~| [~32~| ▲ 





3 


總 s 縴益 . 




Ala displays the hex value -fov- a uU, 
as well 把 its huc-saluv-atioh-valuc 
vcd-gvcch-bluc (R^B) f and 匕 yah-r^c 山 . 
yellow-bUdk (C 離 ) values, /ou 己二心 
3 亡七 ^-*AB values -pvorw j^ulcv. 



Some of Kuler’s features 
require an Adobe ID. 

t V - r #. f In order to take advantage 
W4lvil U, of Kuler’s more advanced 

features (especially the social 
stuff), you need to have an Adobe ID. Don’t 
worry, signing up is easy, fast, and free. 
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designing with color 



to\or *»s 

^v*c*tt7 Wa 扒 d. 

^ ~ > 




^ulcir s a lo-t 啸 c 

(ihoosihg ^olov 

V^u ^igh-t get d\U 

Coleys -thah we did 

^ page 111 wheh v 

乙 olors by hahd. 


Use Kuler to take the base color you selected in the previous exercise and build a digital color 
palette based on the triadic scheme. Once you have your palette, add the hex color values to 
your SampleRate CSS file and see how they work together. Use your colors for the background 
colors of the various <div>s in the SampleRate site. 

Thcvc a\rc move <div>s 七 han dolors \y\ a ihvcc- 
dolov "briadi 匕 sdhcrwc- Tiry pidk’mg some 
dolovs "that a\re a Irttle ov* da\rkcv* 七 ha 竹 

y ouV " … thv-cc tolo\rs -fco -pill out SarwpIcRaic. 


w :.' 








SampleRate 

Hchti« Niifck. Mmut Curh^L 



^Tiri Lpiiirr 扣峰 r 
im#G« 

帥 ， $lL Fu^d 
cflRafri：^" iaroiii 
Otti fpfre 

n&j j a PNaurfivi cfct 
mn^rH rrflc5cr)*rc#n 

4^Ki JWidfCiL 
bs; N5i. Ciir^iliDjr 

u^4qh ，ifmim M 

驪 rfllt t^H 


Heading One 


L^p«m |l: arncsE, Fu«# 

JrK4i m Dtis nt€ Ia. 辭 -* lei us epe*i ■whuim. 

tofm ad^of, i*c r j <x>t1 s h#nch«41 fti; 

Our«£> tt p spurn j "Hit fo 电 ， Sod mcrti.fr crum, pu^kur 

at. flail i tL ¥iie, Nrcfv? tirt ik , nvhHW penfi^im. 

■t rr^Af fsp div p_riur__ rilTE^iiM 19 ji^^irkjp ittflr ,， 


Heading Two 


Cckfr^f igh r C 


LM«fn d^&r aiE -fernit, ccKi^m ： Hiui> a ] • l Fuict- 

(DG'MqiMt Jbrou in mifturli^ t'Ji n*L r^lia 為 ■•uil «9fe1 imfturtEi 

lnbf*e r *arem Wivlnfilt ^Et r l#c _ 右 C9d. ticndrcf ^ 6L fiftl. 

Cprf>M|ir Mtnwl ipwrn. >p^ ri__ n $fd qupm. p^Yikiar 

«(, ■Pgdji _(■ ^tyrlifi. viLif, ■ Ctitu icr. k niLiii|UH a |Mmitfl3/ui 
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triadic colors with kuler 


% 


Your job was to pick some colors on the color wheel and fill in the CSS for SampleRate using 
those colors. What did you come up with? Here are the colors we chose: 



(dasc) 




a^rc shades two *briad’6 Colors. 


OuV* U b3SC W CY\Atd uf 3s 七 
badkyou 灼 d to\or *fov 七 he pa^c- 



body 



margin : 0; 
padding : 0; 
font-family: Verdana, sans-serif 

background : #427236; 


^header 


margin : 0; 

padding : 20px 0 lOpx 0; 

background : #adbc4 9; 


#nav 


#wrap 


Lijh-t b\ro>m (or 七 he headev-. 
background : #59ad41; 

-fov 灼 av/iy 七 ioitv 

[ 

margin : 0 auto; 
width : 800px; 
background : # f f f; 


T, 


Nohde that the v/hitc-bov-dcv-cd div-dlc 

is av-ouhd ou\r base dolov-. 
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designing with color 



l/Vc made -the 
wv-ap <div> 

bddk^rou 灼 d 

whi-tc so the 
匕。灼七⑶七 o*f 七 he 
s^td^ds out 
a bii bciicv-... 
■tha-t intakes i*t 
mo\rc readable- 


U»nem ipsum dQkif sdt 
smet, canHcletutr 
adi^iSdn^i Blit. fvWrE 
consequdt aroi in 
rYiauri^. C 「 4, nee 
nyii^. PFi^s«l^is eget 
rriauns. Integer larern 
d 咖 G volutpat &get T 
ladyiis hendnric 
at H ndl ， Qmb?tur 
ulbrkcs ipsvm 
amiet Fc-a. 


Heading One 


Latem ipsvm doter >amel, co^vsectetue^ acTipfsong clrt. Fusee 
«rlK<iyaC In itiouris. Cras nee nul^a. Phesd-tK eget. run urii. 
Intf^ier Iqrefn dgSor H vaiutpdt eget F l>acJnii egi^i, hendrvrwt fn^J. 
Cu^abstur uldncts ipsum sit am«L fcJii* Sed melus qi»m, flul^inar 
£t, Laeuil^ &t„ labcrtJa Icdut. Cbm UhCil^ natoque p^nab^gi, 

ibur fkn 


et magni& di& rtunent monte-s, fvasce: 


Ikulvs mu 


Heading Two 

Uirem ipsum dofar sjt i^nseclctufir a^lipbcir>g eltu Fl 

conscQuaC ami in fnnuris. Crus nec nui^i. Phflicltura eget; rTN 
integer iarGin daSar, tiolutp^t eg«t„ kacini^ cgel, hendner^t at H n\ii. 


: U5jQB 

nnurra. 


What happened to our blue 
color? 

Good question. We just 
couldn’t find a natural place to use 
that color, although it might work 
well for the link color for text. Just 
because your scheme results in 
three colors, you’re not bound to use 
them. Always trust your judgment 
over a color wheel or best practice. 
Ultimately, you're the designer! 


tWei£ire no o 

Dumb Questi9ns 


Where did that light green 
come from? 

Kuler gives you lots of varying 
colors when you’re choosing a 
scheme, including lighter and darker 
versions of colors you’ve already 
chosen. Those additional colors will 
go well with your scheme, and that’s 
where our light green came from. 


My version of SampleRate 
looks totally different! 

Good! Your sites should reflect 
your choices and your client's tastes. 


The Sa—eRa 七 c loy> 中 lUas a 々七 e 

batkyouy>a. O^ct >/c a to\or 

? alcUc, Aa 呼从 c lof 

从 at i 七 i\\c \\tadtr. 


I don t know, the site just 
feels... heavy and oppressive. 
Do you think you can fix that? 




HJDt 




_mg SdinpleRate 
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color saturation 


The opposite of heavy is … Ijglit 

Sam thinks SampleRate looks heavy. That’s not surprising... remember, color causes 
people to feel things more than any other type of web element. So what do we do 
about a site feeling heavy? Well, we try and make the site feel lighter. 

The great thing about the triadic color scheme (or any other type of color scheme) 
is that as long as you stick to the general location of a color on the color wheel, you 
can change its saturation. Saturation is just a fancy design term for the darkness or 
lightness of a color. So we can lighten the saturation of our color scheme... it’s the 
same colors, but a lighter feeling result. 







The -fed o( this site 代 ally thanes as 
tk Co\oy satu\ratioh is adjusted. 



To Aa 呼如 ?alcUc as a 
v/Uc, all coWs 

如 saw dos 代 o' 

a 叫心⑽ 如 ⑽七代 

6olov Accl. 


results rn a darker 6olov. 


Closer *to -the 

results ih a lighicv t,o\or. 


^ ovih 9 ^loscm ahd 

Wh 饮 4 。 … 七 he 

ihc Co\oY 
wheel y/ill pmodu^c 
Msily di-Pfcirch-t 

^Sul-ts while \rcry»aihiha 

逸 “he bouhds 

^d\c schema 
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designing with color 



Color \y\ -this palct^tc is \rep\reserrted m "the wheel below. B 
"tiioujli "this is 3 br\sd\C sdhcrwc ； -five dolovs 3v*c possible bcddusc Z o-f 


ihem a\rc lighten shades o( -two iv-iadi^ Colours. 


ab -tV^c 6v-tlcs 


you C-3 k\ y 
3^(j[ move a\rour\d oy \ 

•bv^c Because you 

V^ave w Tv-'iad w selected, you 
do^-t iiavc bo wov-v-y about 
mcss'm^ uf youv scheme. 



Select a Rule 

Analogous 

Monochromatic 

Triad 

Complementiry 

Compound 

Shades 

Custom 




Remembev-, weVe still 

us'm^ i\\t Triad 比 (T\r*»ad) 


Co\or sdiicmc- 


i^harpen your pencil 


Adjust the saturation of the colors on the SampleRate site and 
change the values in your CSS file, starting with the colors below. 
How do the new colors change the feel of the site? 
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tetradic color schemes 



Create a richer color palette with 
the tetradic color scheme 


When people find a site boring, that may mean the colors 
are too light... but we already know that Sam doesn’t like a 
darker triadic color scheme for SampleRate. So if you can’t 
go darker, consider adding colors. In other words, go from a 
three-color scheme to a four-color scheme. 

One of the most common four-color schemes is the 
tetradic color scheme. The tetradic color scheme (which 
is sometimes also called the double complementary 
scheme) is the richest of all the schemes because it uses 
four colors arranged into two complementary color pairs. 

Be careful, though. Four different colors is a lot to deal with, 
and you can’t use all four colors equally or your site will 
look like a mess. But for adding some extra complexity and 
energy to a site, a fourth color can really make a difference. 


Colov-s m a -be-bvad^ av-c 

awtV^cv- av\d abou-b 2-0 dc^v-< 


OY\t 


o-f *tV^c pair. 
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designing with color 



Create a new color palette for SampleRate based on a more complex color scheme like tetradic 
(split complimentary). Use Kuler to find the hex values for the colors you choose. 



Choose a swatch from the logo colors to set as the base color of your 
palette (any one that you like, it really doesn’t matter). 



❻ Set this as the base color in Kuler and play around with the controls until 

you find a palette you like (make sure you select the “Compound” option g G iha -A© / 

from the Rule menu). you i USC M ： 

You should see this sctuf you 

y/ov*k wi*b^ 乙 

•m Kuler. Notice *fou\r ladles cm 

4 七 k £.olo\r y/iiccl you t3ir\ adjust now. 



Select a Rule 

Analogous 

Monochromatic 

Triad 

Complementary 

Compoyncl 

Shades 

Custom 




you are here ► 


183 
















compound schemes with kuler 


Soi 


nciSe 

iutioH 


We used a tetradic scheme based on the dark green in the SampleRate logo. Kuler 
gave us four colors in the tetradic scheme, and we also took a lighter swatch of one 
of the greens Kuler provided for a little more variety. 



tJiereicire no ^ 

Dumb Questi9ns 


Are there only two color schemes? 
Triadic and tetradic? 

No, there are a bunch of others. 

Most of the them are simpler schemes: 
monochromatic, analogous, complementary, 
and split complementary. All of the 
schemes follow the same general principles 
as triadic and tetradic. They find colors 
related to each other by certain angles that 
go well together. For more information on 
these and other color schemes, check out 
http://www.color-wheel-pro.com/color- 
schemes.html 


Do I really need to use a color 
scheme to create a good color palette? 
Seems like a lot of work to go through 
when I can just pick some colors off the 
color wheel. 

Sure, you could randomly choose 
some colors off of the color wheel for your 
color palette. However, most of the time 
you are going to get at least two colors that 
clash. Color schemes are based on solid 
color theory that has been around for ages. 
They are designed specifically to help you 
create harmonious color combinations. 


What if I want lighter colors than 
the ones available on the color wheel? 

Color wheels can either get 
progressively lighter or darker as you get 
closer to the center. If lighter colors are 
what you’re after, just drag your colors 
toward the center of the wheel. Or you can 
adjust the hue or opacity of a darker color 
until you’ve got the lighter swatch you’re 
looking for. 
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designing with color 



以从 ou 介 

a , 

今伽 RaW. 


Create contrast 



So once weve chosen our colors, aren’t 
there some rules we can apply to make sure we 
use them correctly on the page? 


There’s no golden rule for color placement. 

There really isn’t a set of rules that will always work for all 
sites. What looks great for one site’s structure could look 
awful for another site’s layout and design. On top of that, 
you’ve got to match your site’s theme and visual metaphor. 


But there are definitely some principles you can apply: 


If you want to separate different areas of your layout (say a main 
column and sidebar), use contrasting colors. This contrast creates 
a border between two areas. That border lets users know that the 
two areas are different and probably have different functions or uses 
within the context of the site. 


adlpisdng elit, Fusee 
consequat arcu in 
mauris. Cras nec 


The bd^k^\rouhd o-P -the page 
"the text area use highly— 
^brash^ dolov-s. This makes 

the <^P the 

匕 le 扣 ly separate -Pv-om the 

overall site b^dk^irouhd- 



Ewphasis-o-watic 

If you want to emphasize certain areas of your layout, use the most 
dominant color in your color palette. If you surround an important 
area of content (like a header or page title) with the palette’s 
dominant color, that area will be emphasized. 


£.o\r\*tv"3S*b 3 

tolov- av-c used. There’s a 
tor\*tv-as*b lorbwee” Home 
•tab artd da^rk batkjvo^d. 
But tab is cm^as'iicd 
d^d'ms*b *tV^C vcv-y 
broym badkyou^d- 
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finishing samplerate 


Let's update the SampleRate CSS 

Here is the completed CSS for the SampleRate site. The colors for the design are 
blank (and represented by the grey bars). Get the CSS linked up with your XHTML 
and double check the layout. We’ll add the color in the next few pages. 


body 


hi 


margin : 0; 
padding : 0; 

font-family : Verdana, sans-serif; 
color : #333; 
background :，…………，…… 


margin : 0 0 5px 0; 



All the blanks a\rc places we 

nwd dolo\rs … well add those ih 
ovcv- the hext -Pew 


#nav ul li a.active { 

background: #eee; 
color : #333; 


#wrap 


margin : 0 auto; 
width : 800px; 
background: #eee; 
border-left : lOpx solid 
border-right : lOpx solid 



P 


margin : 0 0 20px 0; 
line-height : 1.4em; 


細 asthead { 

margin 

border 


20px 20px 0 20px; 
lOpx solid #ddd; 



#header { 

margin : 0; 

padding : 20px 0 lOpx 0; 
background :，…….………… 

} 

^header #logo { 

margin : 0 auto; 
width : 800px; 


^content { 

float : 
margin 


right; 
lOpx 000; 
padding : 0 2 Opx 0 2 0px; 
width : 54Opx; 


^orders avo^d 

“m <dW> 


#nav 


background : 


#sidebar { 

float : left; 
margin : 2Opx 000; 
padding : 0 2Opx 0 2Opx; 
width : 18Opx; 


#nav ul { 

margin : 0 auto; 
padding : 20px lOpx 2Opx lOpx; 
width : 800px; 
list-style-type : none; 

} 

#nav ul li { 

display : inline; 


#footer 


margin : 2Opx 20px 0 20px; 
padding : lOpx 20px lOpx 20px; 
clear : both; 

background : . 

text-align : center; 
color : # f f f; 


#nav ul li a { 

padding : lOpx 2Opx 2Opx 2 0px; 
text-decoration : none; 
color : # f f f; 
font-weight : bold; 


#footer p { 

margin : lOpx 000; 
font-size : small; 
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designing with color 


9 % 

E%eRc\Se 


Write the hex values for your colors in the spaces where you think the color fits 
best. Think about contrast and the best way to make the content stand out. We’ll 
build these colors into our actual design in just a few pages. Remember, white 
space is your friend! Use #f f f f f f for white. 





lorcsm tpsu 
-nrlfifit., c 
Iidipl5cii>f] fllit. Fl^hts 
CD n^qyLit .rdu irl 
Pia-iiriE；. Cns P4C 

rlo'drif. Ifftcgcr torcm 
volutpat 句氐％ 
Li^ihi eflet h«n»dnE nt 
n m . Cureibitu~ 
ultroei ipub-m lit 
idmel ； W& 


it* d&lnr 对 Heading One 


ip«Mm ^Ig-r a^Sp^^f Ribqa 

argy in ma^r ?. drjiG f 

jqirafn dpi^r ； cg-oE^ lacinii fiantfrcril #t, nzti. 

MblaH. Ipstim i(Ma t pn^lvliur 

At, I^CLila £ti lab^rtd i irfbe p it dm ， p^rubbM? 
fnAg nlf d s pArtLarj^rat n^ot^r rtdlpjli# m\^ m 


■L 


Heading Two 


- - 


iptym lit ame% Hijib^ngi 套 It FvaK 

g^n^qu^rt $rcu in mQ^ir：?. Cr^i necryib. Pluiifl^ imD^riii. 
h^r^m cgcL IdcJnilp h^ritficrL^ti nial- 


c"~*. i J I a S ■ . f a ■ “ f “ a = ii-|i"- ^ .a f j I a C a. .- 1 " i ■ A-. I ■ » .«■. a j f 1 .. .la. : t-1-, j. - \ 



\ 


y 





Choose dolo\rs -p\rorw you\r sdhcrwc -Pov- ea^h 
of the <div>s oy\ youv page. 
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adding colors to samplerate 



Here’s the layout we came up with. What do you like? What don’t you like? 


ExeRciSe 

SotuiloH 


USCd ihc ^ Pulled 


ihc 


vt Y 0 ? 0 认七七七 




^UiHfeiE 



f 


L»r^mi Ip 私 ■甲 d^He-r ^J: 
diret epn«gi^ftier 
□dlpliClnpg dlt. Fl^dc 
panmiiJit .rcu ii 
rpiuris. Cns hc 

rvulft^ 口 hijKtlus cg^E 
nRiuria. IrlteQ-er tireni 
v^uipaE €料 
bur niJi J^n^pp^ 
i1 F ills - Oumtltur 
Li^iw, Iptm AJt 
arr^t f^dia 


Heading One 


Lsrtn K»^ti sft amg^ c^n^cuktr ad^dnei cUu iFu&cje 
narwquMifc #rfip a msnijim rwc mdlii. PhJi 4 PHIirt. pqpf miiLirKi 
£i¥lag#r H^fa m u&hi^Kil; •>! ， r-M. 

D^ r Ab>iiir uHri^i ip^urn jsm«t ^eii. S^d ^arr, pgl^iivr 

a% 蟢 《 t r Otcutit vit«, fe?l44u Cym P*ri*tibi^ 

el magn parturient m&nbH. nasntur rlcfcuiL^. mL*. 


Heading Two 


Lftrem ppKFH ddo>r 3ft a^nxfActhtr AifpbQns m!rL fusco 

ronscqiMi ■rtu< h mauiis. Cres> npeic nullii. Phuxllua-cqeL rT^aufbi 

[mjfioeir tavern door. vcMu 紅 u[««. 4fidnli i^ru, Htntfreri^L r^SI. 



「——— 7 —1 


\ 

# 91dSac 




Sometimes a liftht avay is 
-Pov text, without 
going all the way -to whi-tc. 


•fov 


^ ^ea 565 

IX— a sli^tlv davkcv 工二土 

\\(^i yr^- 
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designing with color 



0 


o 


Hey, thafs really nice! I like 
it... but listen, I did some branding 
research, and everyone thinks my 
logo is too ''analog." So Ive got a 
new one—much more Web 2.0. You 
can fix the site to use this, right? 



hew 'Web Z.O ，， J! xl 

| 090 is 

一， h 



^rfSampleRafe 



We’ve got a whole new logo! Your job is to update your color palette to fit the new design and 
add the new hex color codes to your SampleRate CSS file. 



Select a base color from the new logo (your choices are a bit more limited this time). 





Use Kuler to develop a color palette that meets the new SampleRate site’s needs (and 
that of the site’s content). Write the hex color codes you chose in the blanks below: 



Update your CSS file to reflect the new colors. Experiment as much as you like! 
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it looks great 







SampleRate 


午 


Hanrie 




Heading One 

Lapctti Ip^ijn aTiet 


LafBf*i fum mii 

MmEt t cigmKteliwr 
fldiRSicjn^ dt, Fijp30e 
u-^quai: arm bi 
m.urlE. L^Ie「《c 
fiirftn Pluu 3 ij«. i^ppi 
rnAurti, CnU-Qcr to-em 
vohiipat dqctj 
licinla t^il, lHr^T«rn; 

nlcL Cbniblur 
ulr^cei i^nirr 1 ! sjt 


Iffwn datoraft an^t iCMS«tjrti^ 蚪 fc. Fy«E 

£DTHq.jal ■iru “n rf*iun*^ €rx. niK null, rfiiyrs.^ 

Encp^f tefpiin iiakk^ yot4pi^ l^ftailA fsg#^ wnri^M »t B 

OLirdblu Lihfh^ ， ffiw 旧憑迚 $m! rr^buf fiulvlr^r 

□t; inciila-cti kri»r^|. vtnc, tcc3iw Cun kpcIs mMzpljo pc vbbia 
at mjiaf is df Ez-ani-riint Tiontas,. r&HdaiLr r^iojtjc mia^. 


Heading Two 

Ldtkp jprfijrn dbiorfU- mu#,. CDnsKteCuPT JHlIs^Kk%. sit. Pmsm 
D?rKq arty rv nhd%i~a. €r» neCniifli. Phase! ui «g«L itiBurisk 
[n£#9cr Itairefn d^iar, epe% ladnln c^^t, hc-rsd^rt nt, ntsl, 

ifurji h ti r LfHriTwc nmm mit : a mint Rule ^hI rr Ahiic nunm r 


料 0000 




9rules 


190 Chapter 5 





















designing with color 


Your Web design Toolbox 

Color ， tetradic, triadic, split 
complementary... lots of new 
terms, and you’ve handled them all. 
Go back to the other sites you’ve worked 
on and update them with color ， too. 




BULLET POINTS 


■ Color has a powerful impact on your site’s visitors. 

■ Use the color wheel to choose colors for your site’s 
design. 

■ Color schemes are tools to help you choose a 
harmonious color palette. 

■ The triadic color scheme has three colors spaced 
equally from around the color wheel. 

■ The triadic color scheme is popular because it 
provides strong visual contrast while retaining 
balance, color richness, and harmony. 


■ The triadic scheme is not as contrasting as some 
other schemes. 

■ The tetradic color scheme has 4 colors arranged into 
two complementary color pairs. 

■ The tetrad ic color scheme is the richest of all the 
schemes. 

■ The drawback to the tetrad ic scheme is that it’s 
sometimes hard to harmonize. 

■ Use a tool like Kuler to create a color palette (and get 
the hex values of the colors in the palette). 
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6 smart navigation 

u ln2 seconds，click ‘Home’ ■” ♦ 



What would the Web be without navigation? 

Navigation is what makes the Web such a powerful information medium. But here’s 
the thing: navigation is a lot more than just whipping up some cool-looking buttons 
and slapping them into your design. Building smart navigation starts with your 
information architecture and continues through your entire design process. But how 
does it work? How do you really make sure your users never get lost? In this chapter, 
we’ll look at different styles of navigation, how IA guides your page links, and why 
icons (alone) aren’t always iconic. 


this is a new chapter 
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identifying problems in navigation 


School’s back m session 

The College of New Media at Mackinac State University has a bit of 
a problem. They’ve just paid a bundle to a web design firm to redo 
their site. The new site looks great... but nobody can find anything 
anymore! Professors can’t find their papers and documents, teaching 
assistants can’t even figure out what classes they’re teaching, and new 
students need to register for the next semester’s classes... now. 


The college needs you to unravel their navigation nightmare, and do 
it fast. Otherwise they’re going to lose students and faculty! 



r 

MSW's awash ih 

doh-pusioh 


O 



i # rm 

C ； -isl#gri mf PJnb Uc-dti UArfe-Au: lur# |biM€iJiy 


* ^ -=■ 1 IjL ：" j 


- %/• ^oo^ia 

tff UKlfEIDItfVklEIU 
‘ muPACfrfluwwssrT 

Horm htaUada SbidcffHlbP doily QaLh'^udi 

i 


國 © 珍歐 


蘇:醫 ■■ '、胃 




4 # 


Wlfco~« 75 Th# CfAlfifrH Maw Ufd4r; MSU 
4 Comaet CHU 





Th* 1/ Htrtr IVVdhl 

utKmm Stilv UnmpTiiji 

H%rLh 


New MHflfl 
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由 ipi 一 BhpMppIri^VyEKp, _ 中 _ 

md nhy^coA Thi 包 

am apf#M ptcnomii pwnrwita -fw sm 矽 I i?tp4r» 

lJ? Bpphnotapcpiy ViMy-f；. pn4 cmibirq rr^km 

WhvCUM? 

1 轉 icy, IrApfriEbcir a taoErrwnq caninusayB md mzlMnlJy *ccp^b-a Tha 

Nil Uiuitd i iKAn U^M^riin wfich yxmkii&iu 

*nti 4wiM« hlo-maUn. T^i Mfptin end co^wgrtpc* of kkmM, 
ItcfinAsglnL pnj nfenruion syvlPTiR Nn nPi^Pl mMrMrmfv tri Vm 


_ _ _ - - 1 L - … .~.i ___ : 

: — -- - ^ 



TW»s \s *tV>c Colley 

Kcv , Media’s ❹▲乜 
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smaft navigation 



Take a look at the screenshot of the current CNM site. First circle all the different areas of 
navigation. Then list any problems you find in the blanks below the screenshot. Be thorough and 
remember, both students and faculty are using this site. 



WhyCNM? 

TirMtt, m vscomtQ Huid, comxAua nM Hia 

■ slvti m lha m crub. bchh. uh>. urdartund 

Bird fhst'itHillv rrionTMAon. f»H Khwnt mnti nsnv&i^cvTDB of stdw i4hi. 

T^rriHBfln Pw? ■m* gl tfio 


-Hpg TTngrrTiHDpn lywfffnj. rw? npwgwa in* tne 

L - ,_ . ' ------ - - … … - - --- - I 


4 Cont&ct CNM 


Tha GqIoqa 识 Uacui 
HacKitik 说 tit LKUvtrtity 
123 * UpttIKm Avfl 
T E «4 ^whnMI£»B 4 


N*w Med^a 


Tho Ga^ogp irf Huw M eh^bl mi Madame Slmfifl Ur#wiiiv u^mnwn 
itliifihKlpirwv DDiprH cri _udy hi Urn sv^b^ir. htsfep^, o^m^x 

opd theory gd 4TT&qifna 的 n. T»ifl ajmi?uiijm frnfl^n- bp rMffftgplQ Itm 

autrwv #nd jLppftKl p-oppiiH axiHmEuil 1? But BTHql sbjd|^ n prufurai 

Btud«rTli "to ba lidviglpgiaily cmpubio r ■rficylilj) 匿 irucuiit pud or-fiabfVD m^dia 


r n n 


QiHf-qf of hHr UrdLi | Mukiuc Sul^ LAnisfri^v 


enm 


DDLUtEOFrCWHECbl 

IMCHHM 观 UHflRSmr 


Horn* Mw M«4a &m0tnb IFujI^ QMnbucfv 






Do/t -fo\rgct -to desdvibe the 
firoblcrhs you -Pihd hcv-c. 


❺ 




you are here ► 
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good navigation starts with good ia 


% 


Your job was to find all the potential navigation problems on the CNM website. What 
did you come up with? ^ 

hur^bcircd iicr^ 

^ 5 p^oblcr, WC 
dowh below. 


丨 《 r* n 


i p 



M Cantact CNM 

T_ Cdpppp qi hvw 

'Ejb! W 


Mew Media 

1 h» Q§_fi V h*# Mldftl ■ VlfeOUlK 由 _ MuviW<Qi_P _ 

nlfl^fidphiiiV x^a# of ilriy h 你 # ft^aitmi, it^hn«4c^M- n«iMrf r 

mdOhEwr)ff libfTTHADn. INlumcuhipi bi^Me^ u§cnb bmilgBlsth« 
mafivq and WfM piDi:_q，_ ■e^witai _ fhm Et 時 tl prpp*rpi 

ITMflrrcm iJKijjtM EWitH, AM tf _1M mKLA 

P^pWi—iEfaJl 

Why CNM? 

I nl^friiiQinq. »mmng n^ia, 4mrwM> Mia iuuniy fnii 

hM P4iiiUl itvfiir 由 H ^l-ft ^ KOHd, M4 5 k^d^iLlindi 

und ^5trfiuto wtumwtsn. 1 * 1 * fid«Tl M ronvofatnoi if mhv Aea^ 
IV^fn^lDgllpEs und! rfs^-n-^jan a^vlpna hu m^ndtaHp Pi# r^ofipr|li^i -d Stw 



O The titles of these links leave O 
users wowdermg what to 
expect whew they cjick them. 


These look like icons for the 
different programs, Not sure 
what theY 聖 " 伽她 
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© It (ooks like the designers O 
skipped the 抑 yi ⑽ tipn 
Needs some style work, 


WiH this always be a tit|e? 

W|(j wore wavigatipii show 
up here? I'm coiifusedv V . 


Chapter 6 


Most of this is about crappy link names, 
right? Can*t we just go in and fix those? 
















































smaft navigation 


The first step to good wavigatiow is good IA 

The names of your links are more than just helpers for your users. They’re actually the 
categories that organize your entire site. And most of the time, a bad link name means 
someone wasn’t thinking about navigation way back at the information architecture stage. 

Let’s see what the GNM IA diagram looks like: 


Uc CNM IA d\ayr^ 
\ 


卜 _ 11 (SlI I S S S I 

I si ns n 卜 — I 

區 "j 卜 _ 11 CoursM 11 S I 

fsHi Ap _~n I—-1 




Vmks avc ⑼七 I7 


Rip ba 乙 k *to Z 

彳 you heed a vc4cshc\r 
° h oirgahizj-tioh 

3hd •nvfo^rmatioh 

debited 浐 c. 


氣 : 


The IA of the CNM site seems to be organized fairly well... but the category titles are horrible. 
e * What in the world do they actually mean? Look at the content under each category and give that 

category a new, clearer title. Be sure to think about how users will interpret your titles: 


□ □ 


mink aoout now usei 

□ 


□ 


you are here ► 
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renaming navigation links 


9 ^ 

bteRciSe 

S°tytlOH 

TWis *»*bcw> be Ic-ft 
alcme because i*t v/ov-ks 

fV"C*t*tY 3 S IS. 

4 r 

Programs 


Your job was to come up with new titles for the main navigation elements of the CNM 
site. Here are our ideas: 


T"hc dohtcht ih this 
^a-tcgo\ry all seems -to be 
*Po\r studchts. They also 
vcp\rcscht a la\rgc dUhk 

°*f site’s usc\rs. 


TWis is \rcally 
jus 七 -fa^ul-ty, not 

students -boo. 



Faculty 

\i l^r^irwf 110 

C. „CaaajLH# 


This is shov-tev- 
3hd casiev- -fco 
uhdc\rstahd thah 
u ^ct ih Wh ， 

_^ 


About 



I Abou^TT Contact 


CNM 



Whafs really in a name, awyway? 

The names that you give your navigational elements (links, buttons, 
etc.) have a direct impact on the usability of your site. In other words, 
names are a really big deal on the Web. You should put a lot of 
thought into the name you use for each of your IA categories and 
navigational elements. Here are some general guidelines to help you 
come up with good names: 



Keep names short. Make sure that your names are as 
short as possible. You want your user to be able to scan a 
name quickly. One word is ideal. Only use two if you really 
need that extra word. Avoid using words like “the” or “a” in 
names, too. Those are just a waste of space. 



Keep names descriptive. Make sure that the name you 
choose is as clear and straight to the point as possible. You 
don’t want your users to look at a link and be confused. If 
you’re not 1 10% sure what a name means, your users sure 
won’t be, either. 



Dumb Questi9ns 

What if I simply can’t make the 
name of the navigational element one 
word? 

More than one word is ok as long 
as its completely necessary to tell your 
user exactly where they will end up when 
they click the nav element. Pick a name 
that won’t lead the user down a path 
they didn’t want to travel, rather than one 
that’s just clever and articulate. 
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smaft navigation 



TesT DriVq 


download the College of New Media site files from 
the Head First Labs site. 

Visit http:/ / www.headfirstlabs.com, find the Web Design link, and 
click through to the Chapter 6 sample files. 


Update the main CNM navigation links. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict•dtd"> 

<html xmlns="http: / /www.w3.org/1999/xhtml" xml : lang="en M lang="en"> 
<head> 


<title>College of New Media | Mackinac State University</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8 


/> 


<link re1= M stylesheet 
type="text/css" 

</head> 

<body> 

<div id= M header M > 

<img alt="cmn logo" 
<p id= M nav"> 

<a class= M active" 
<a title= M # n href 
<a title= M #' 

<a title 二 ▼，#' 

</p> 

</div> 


’ href="stylesheets/screen.css 
media="screen" / > 


src="images/enm logo.png" / > 


title= M CNM Home" href ： 

n #">Students</a> 

href= n #">Faculty</a> 
href= n # n >About</ a> 


index. html ">Home</ a> 




<!-- rest of HTML --> 

</body> 

</html> 


update the lihks the 

义吩卜 io 

^ y ou , hCW cai 

Ulcs -the IA d\a^L 



Check out the site and make sure things look right 






























unordered lists and navigation 


o 


0 



Ive been taking a close look at these nav links. 
They re just in <a> tags, right? Should we do 
anything to make those links related to each 
other? They re all navigation, right? 


The Web is both VISUAL and SEMANTIC- 

We’ve mostly been focusing on how sites look, but 
there’s another element to the Web: the semantic Web. 
Right now, our navigation links look good, but they’ve 
got no meaning. Really, those links are a list of items 
that are all part of the site’s navigation. 

What we need is a way to give some semantic meaning 
to our list of links. Of course, XHTML gives us a 
couple of list elements, so let’s start there: 


the <ul> a Uhi^UC ID so ihsi wc 
style it di-PWh-tly -Pv-om 

lis*ts that 你 ay appear on -the site- 


i\r 



cm a 於 active state, tav\ add a style 
users kr^oy/ fajc art on. 


"Hiis id also uhi^ucly 
idcK>ti-Pics -this lis-t as 
3 lis-fc o-p haviga*tioh 
clcmch-ts ： tha-ts 


<ul id= n navigation n > 

<li><a class= n active n title= n Home n href= n index.html n >Home</a></li> 
<li><a title= M My Blog" href= n /blog/ n >Blog</a></li> 

<li><a title= M My Portfolio" href="portfolio.html n >Portfolio</a></li> 
<li><a title= n Contact us" href= n contact.html n >Contact</a></li> 

</ul> 


\ 


/\ standard Tmk taj joes m list 

l»s*b or Imks. 


thereictre ng ^ 

Dumb Questions 


This is what the lihk list will look 

like with ho CSS applied. 


Why do semantics matter if things look good on screen? 

Good question. For one thing, you can write much more specific 
and functional CSS rules if you're identifying sections of your site 
semantically. But even more importantly, semantics are a big deal 
when disabled users access your site. We’ll talk a lot more about site 
accessibility in Chapter 8, so hold that thought a little longer. 



BOO 
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Home 

Blog 

Portfolio 

Contact 



























smaft navigation 


^Sharpen your pencil 


Before we can start updating the look and feel of the CNM 
navigation, we need to get the main nav into an unordered 
list. Take a look at the main XHTML and CSS for the site file and 
update the markup and rules to work with an unordered list. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns= n http :// www.w3.org/1999 / xhtml" xml : lang= n en M lang= n en"> 
<head> 


<title>College of New Media | Mackinac State University</title> 


<meta http-equiv= n Content-Type" content= M text/html; charset=utf-8" / > 
<link rel="stylesheet" href="stylesheets/screen.css" 
type= M text/css" media="screen" / > 


</head> 

<body> 

<div id= M header"> 

<img alt= M cmn logo’ ， src= n images/cnm_logo .png" / > 



index.html 


</div> 

<!-- etc.--> 

</body> 

</html> 



Add ncv/ 於 aviybicm I’rnk lis 七 *to 七 he 
iicadcv- CKM s*»*bc. 


#nav { 


#nav li a { 


Oy\C,c you the mav-kup, you -fco 

adjust -the CSS so -tha-t youv- 
looks "the same- Add sorwc V*ulcs -fco yt 七 he 
navigation looking like rt did bc-Pov-c you 
七 he 




screen.css 


you are here ► 
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styling unordered lists 


Now that you’ve got a good idea about the primary and 
secondary navigation, it’s time to put your newfound knowledge 
to work. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict•dtd"> 

<html xmlns="http :// www.w3.org/1999 / xhtml" xml : lang="en M lang="en n > 

<head> 

<title>College of New Media | Mackinac State University</title> 

<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 

<link rel="stylesheet" href="stylesheets/screen.css" 
type= M text/css" media="screen" / > 

</head> 

<body> 

<div id= M header"> 

<img alt= M cmn logo" src= n images/cnm_logo.png" / > 

<ul id= M nav n > 

<liXa class= n active" title= n CNM Home M href ="index.html">Home</aX/li> 
<li><a titles" # M href =' 1 #' 1 >Students</a></1 i> 

<liXa title="# n href= n # M >Facult.y</aX/li> 

<li><a title= n # n href = n # " >About</a ></1 i> 

</ul> 

</div> 

<!-- etc.--> 


l/Ve -the <p> tags -to <ul>s a^d added the 

app\rop\ria-tc <li>s {o I'mk. 


</body> 

</html> 



<script src= ,, ..71| 
js w /> : 

<img "j 

src=^siteLogo. 1 
png M /> j 

</html> ! 

index.html 


喊 harp your pencil 

、 V Solution 


#nav { 

float; .. left; . 

width: 460px; 
height: 75px; 
font-size : 1.4em; 



#nav li a { 


.color,#.ff f; . 

. 

padding : 20px 20px 20px 0; 




1/Ve -Ploaicd v/iiolc 灼 灼 *to 

Irf 七 so it affcavs *to 七 he logo m *tKc 
uffcv 七 dovy>cv-. 


Like the hav <ul>, wc -floated 
tac\\ lihk -to the Ic-Pt so -that i\\ 

^PP ca,r •… “吋 instead o-p ih bio 匕 k 

^ is the default). 




screen.css 
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smaft navigation 



Tqst DriVQ 


Update your versions of index.html and screen.css, and take the new GNM site for a test 
drive. How do things look? Better? Worse? The same? 


A O 


of M-vk£uI I Mixkji-u^ SHaIi iHnnvriiilf 1 




cnm 


fCdUi-E Df HPS KltiX fciwpff F«y!t)t Atoul 

HACKING SHE Uffl^FVY 


_ 讎 




'mi 


JK 








Ttw 


iDltt4YihiH»a«1 WSU 


4 ContHd CNM 

TT« CA MHM 

Ua^krw。Slate UHwunrfy 
l aJ34 Uti tortnAi^ 

' EHC^I^tr*, MIE2W4 


Well this is clearer, but 
people are still getting lost. 
I don’t think people even 
notice those links up top. 


New Media 


Th& Coltagvof Haw eM Me 

ntnrdK^invy myiHoT wSijdy n Vm wf^rnm, ImStnxogms^^^Y ， dipon, 
dwofy-ql Thf armt^ ihjdtfYL^I^ WfnbQMaa 

i 細 m 6 piw6»«s tt^i ol may. H pfeipurei 

dudtHTEaBa bn I KfraiDi^cBlIy 1 capal 
pfiplHepiiVU 4 


uid I: 

«ru[ 


i nmb c EirlicajUQ DirwirK, .und crutivti ncH^a 


^CNM? 

h vili^Trurl 聊 I 


Why 

TiCKifly, iTlQnrvhpn _ bKqfwig Huld, EEdteu^yf Ml viMaiHy Kcpiubfai. 
h«i cftuiftd • ■HiftNi 坊眷诈 tayi In _1 功 w» 0*41*. iohm. u» a •yndfiriuiid 
nrd d^BFlnbulp rrtonTdb?ri Tho _dnnl -and conva^aiprioD'al iww id^em, 
LicTwKriiqjpH^ And nlwnurlon qnlBfTif hu FvMraSKl tta nalilEirul^] pf Ehn 


o 


0 


1 关 


Jliarpen your pencil_ 

^ Where else could the links go? Write down at least three 
ideas for a different style and/or location for the CNM’s 
site navigation. 

1.. 

2 . 

3 . 


you are here ► 
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horizontal navigation 


Approach # 1: Horizowtally-tabbed navigation 


Many of today’s modern, standards-based designs feature horizontally-tabbed navigation 
systems. This type of design works great with a one or two-column layout (though they 
tend to get a little stretched out the wider a layout gets). A horizontally-tabbed navigation 
system also works great for your primary navigation because if the links are put at the 
top of your page, they attract the attention and focus of your user. Tabs also give the 
impression of the site having different sections — which it does. 

Here’s what horizontal tabs usually look like in XHTML and CSS: 

<ul id="navigation n > 



Like bc-fo\rc, 

Imks av-c m a lis*t 
scma^t^ally marked 
as navigation. 


<li><a c1ass= n active" title= n Home n href="index.html n >Home</a></li> 


<li><a title="My Blog" href="/blog/">Blog</a></li> 

<li><a title="My Portfolio" href="portfolio.html">Portfolio</a></li> 
<li><a title="Contact us" href="contact.html n >Contact</a></li> 


</ul> 



^navigation { 

margin : 0; 
padding : lOpx; 
list-style-type : none; 
border-bottom: lpx solid #ccc; 


^navigation li { 

display : inline; 


^navigation li a 



TWis rule i\\c <li> -fv-om 

a \)\otV element to ^v\ mime elemerrb 

alloVi^ 栎 cm appear 

mstcad ok one 


text-decoration : none 


padding : lOpx; 
color : #777; 


^navigation li a.active, ^navigation li a : hover 
background: #eee; 
border-top : 2px solid #ddd; 
color : #333; 


The active hovc\r dllow us -to 

dc(\v\c \rulcs 七 ha 七 -the ^avi^aiioh 

wh ⑶七 he Imk has an “active” class ov- 
when i*ts hovcv-cd ovcv wi-th -the mouse- 
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smaft navigation 






» T 


BLldCOAfl kiCh Icagu Oihm C£h Hfm ywfa i ； Lu An^^mm i IWLlm | Lmm, Vmf» 


#11 ， 


This is a s-tvai^ivt-Povy/avd 
liovizjo^ial ir>av y/*i*tV> blodk- 
s*tylc tabs. Vtr^j simple ad 
-fam'iliav*. 





I - ■ ， ' ■ 

^rmm _ 

(ONEDM - i 

LM U J0n.. aliiH W 1 

PWCE 





llustratnont 



Merch ld«as 


MtCc uses a Kov*izjor>*t3lly—*t3bbcd 
y>dvi^d*tiov> y/rth r^itc dc*t3il oy> 
mdw'idual -tabs. TKcsc fa\rt*idulav tabs 
also vcspoy>d *to mouse hovcv-s. 


you are here ► 
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vertical header 


Approach Vertical navigation 


Vertical navigation designs are just as popular as horizontal ones — and show up 
in a lot of two-column designs. Vertical navigation isn’t inherently better than 
horizontal navigation designs; it’s just a different way to display your site links. 


You can’t always go with vertical navigation, though. Some single-column designs 
just don’t play nicely with vertical navigation... but with most designs, you can go 
horizontal or vertical. 

Here’s what vertical navigation looks like in XHTML and CSS: 

<ul id= M navigation n > 



Ko*bitc )<ttTML 

s-tays *blic same- - all 

d^d is 

m CSS. 


<li><a c1ass= n active" title= n Home n href= n index.html n >Home</a></li> 


<li><a title= n My Blog" href= n /blog/">Blog</a></li> 

<li><a title= n My Portfolio" href="portfolio.html n >Portfolio</a></li> 
<li><a title= n Contact us" href= n contact.html n >Contact</a></li> 


</ul> 


^navigation { 

margin : 0; 
padding : 0; 

list-style-type : none; 
width : 200px; 

} 

^navigation li { 

border-bottom : lpx solid #ccc; 

} 

^navigation li a { 

text-decoration : none; 
color : #777; 
display : block; 
padding : lOpx; 

} 

^navigation li a.active, ^navigation li 
background : #eee; 
color : #333; 


I 灼 ou\r CSS, -the <li>s a\rc displayed ^ov-mally (灼。七 
•mime), by\A ouv- <a> *tajs a\rc displayed as blocks. 
This allows us *to W\tc blodk v-ollovcv-s By\d 

active states. 




Xsi by vchav CSS, 

you Create a v/V^olc d*i-f-rcv-cir\*t 
y\av'i^a*tioir\ layout 


206 Chapter 6 















smaft navigation 


T 


"Tiiis is almos 七 like d w* 七 Tlic 
y>av Vuy>S *tKc lcir>^*th fa^C, ^Y\d ^l\\tY\ a 
Imk is active, *iVs batk^vouy>d ma*tdiics 
*tV>c body dov>*tcir>*t- 



therejetre nQ ^ 

Dumb Questi9ns 


Is it better to put vertical navigation 
on the left or right side of my page? 

J\l Lots of usability studies show there 
doesn’t seem to be any real difference if you 
put your navigation on the left or the right side. 
If your layout works better with the navigation 
on the left, you should put it there. If your 
layout works better with a nav on the right, 
then that’s okay too. 





simpleir thdh 
easy io -f lhC | 


「 W 丨 s is a simple stacked ’ 
whta\ 

6 ool Nava^avo^d 
七 he Vmks. h(o 七化 c hov/ 七 he 
? ulU 七 We 

^rom 如 v^cadcv- \o(y> <A 

七 V\c s'«*bc- 



T-j 





HIPSTERIST 







獻 1W^ 


I P wfckjnE Okni/H 


■ - K M. 


topics 







fallgw ng f^hjiweri updj^x 


Home 


^Rrplir% 


Olreci Mea-a-agvii 

_ 

z 

rd^orlfc» 


E.ve ryone 



you are 


eb 

m 


i mm mmmrm ■■ 麗 ■. 祖 m 




HOME 

ABOUT 

WORK 

SERVICES 

CONTACT 


AHOIJT 
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navigation consistency 


I don’t want to radically change 
our design, so let’s stick with 
horizontal navigation. But can you 
make the links a lot more obvious? 
It seems so confusing right now... 


O 


o 


Inconsistent navigation confuses users. 

We base the way in which we interact with the world 
around us on the predictability of events. Every day 
millions of people pull up to a red light, wait for it to 
turn green, and then continue driving. But what if you 
pulled up to a red light and instead of it turning green, 
it turned blue? You’d probably have absolutely no clue 
what to do. 

Navigation works in a similar way. When a 
navigational system works right, people rely on it. In 
the GNM system, the navigation isn’t what users are 
expecting. That’s because it probably violates at least 
one of the following three principles: 



Navigation should be in a place users 
expect it to be: usually the top of a page 
or along either side. 



❺ 


Links should look like links. They should 
appear to be “clickable” for users. 



Links should be clearly identified and 
separate from each other. 


parpen your pencil_ 

How does the CNM site navigation hold up to the principles above? Next 
to each principle, write down some notes about that principle relating to 
the current CNM navigation. 
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smaft navigation 



Using the header overlays below, sketch three different navigation designs for the CNM site. 
Think about consistency and how familiar your scheme is going to feel for a typical user. 


I min 咖 ^ 


Icnm 


NEW MW 

■此僅 UNMIt^rTY 


I JPH nf dtllieE OF NEW MEDIA 

■ If 纛 厘歷纛 _£K!NiU ： 5MFEUNfmt£ 


fTY 


you are here ► 
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block navigation 



How did your navigation design go? Were you able to come up with some ideas that 
clearly followed the three navigation principles we looked at back on page 208 ? 


^ if Iff 

H ■ 歷 歴 ‘ m¥im SIATE UNIVIRSITY 




Tabs would be d ^\\\^ -for users, 

W 七 v/ouldr\’*b v/o\rk v / 必 "tW 

ovcv'dll o-f *b^c srte. 





■^bs a 代 ih-tui-tivc, dlcav-ly dlidkable, a^d 
dis 七 i/t -Pv-om ohc ahothev-. That s why 
theyve so popular -Pov- havi^aiioh. 



c 

T^csc avc a lot like -tabs, a^d i\\t dwidm^ 
Imes make cadK I'mk look mov-c tlitkablc -to 
ar\ average usev. 


t ... 

\ "This blodk—style is B r>idc 

*Prt y/rth 七 he CMM siic 3 r)d will be 
'ui£>k C 3 sy "(jo irw^lcrwc^"t. 




D0LL£6E Of HEW MED 呔 

mmhi swje mmwt 



This ^av'i^ai'io^ is dlosc *fco y/ha 七 CNM alvcady has. 
Its bas'i^dlly a dledr>ed uf> vcvs*iov> \wrth a v-ouy>dcd 

badkyoud o 内 *thc active ar\A i^ovcv states. - 


TKC i'9 ，，一 _ ^kiha 
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smaft navigation 



I really like the tabs. Why don’t we go 
with those, and just update the rest of the 
pages design to match a tabbed look? 


Joe: I thought the registrar said they really liked the current 
design and just wanted to fix the navigation? 


Frank: Besides, I think navigation should fit into your design, 
not make you change it. 


Jim: Why not? I thought we all agreed that navigation should 
start way back when we’re doing IA. So doesn’t navigation have 
to influence our design? 


Frank: Well, when we were doing IA, we just needed to make 
sure our category titles were short — 


Joe: — and descriptive. 


Frank: Right. But that’s got nothing to do with how navigation 
actually looks on the page. 


Jim: So we’re stuck with the current design? 


Joe: I’m not sure we’re stuck with it. It’s pretty nice, you know? 

I just don’t think we need to mess with something that’s working 



Fv-a^k 



Joe 


already. 


Frank: Exactly. We’re not getting paid to do all that extra 
design work. 

Jim: Hmm. That’s true. And I don’t suppose the school would 
give us extra cash out of the goodness of their heart, huh? 


abovA*b 

tW»s 

Jfov 


Frank: Probably not. I think going with a simple, block-style of 
navigation is our best bet. 

Joe: That’s where we just have some dividing lines between our 
navigation links, right? 


Frank: Exactly. 


Know your role 
in a wet design 
gfigf. You’ll rarely 
get paict lor doing 
” extra” work 


Jim: So why do you call it block navigation? 

Frank: Let me show you... it’s all about the CSS we’ll need to 
create that sort of a navigation menu... 


unrelated to your 
core assignments. 


you are here ► 
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block elements 


flock elements are your friends 


Block elements (like paragraphs and headings) literally form a block from one 
side of the page to the other. And by default, block elements are as tall as the 
content they contain. 

We’ve got our links in block elements already — those <li>s we added earlier: 


h.s ,s why whch you apply a 

badkg^ouhd h> a hcadih 9 . 
十仏 〜 II beyond 


<ul id="nav n > 

<li><a class="active" title="CNM Home" href= n index.html n >Home</a></li> 


<li><a title= n # 
<li><a title= n # 
<li><a title= n # 
</ul> 


href="# n >Students</a></li> 
href="# n >Faculty</a></li> 
href="# n >About</a></li> < 





But we can adjust the height of a block element, as well as its position. The nice 
thing about blocks — and why they’re great for navigation elements — is that they 
all automatically line up horizontally: 
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smaft navigation 


Lefs float the block navigation on the CNM site 

If we think of each < 1 i > in our navigation as a block, then we just need some 
CSS to style those blocks. We can add borders to separate each block and make 
sure each block is positioned related to the previous block. 

Make these changes to your version of screen . css: 



screen.css 


#nav 


#nav 


float : left; 
width : 4 60px; 
height : 7 5px; 
font-size : 1.4 em; 


Because i\\t #y>av (<ul>) is a blodk element its 50^5 *to *to 
y/vap bcloy/ Kcadcv- 1050. To *fix. this, y/c t\ttA b> ^loa*t i\\t <ul> 
\t(i a^d 5 WC \i a Wd widtK so \i displays 从 乂七仏⑽七 Wow, 

七 he headev- 1 0^0. 


li a { 

float : left; 

width : 104px; 

height : 65px; 

padding : lOpx 0 0 lOpx; 

color : # f f f; 


Like the <ul> ，七 he Imks r>ccd -to -float io ihc Ic-fi b> 
a blodk style. Well jive -the I'mks a Wd ki 吵七 
and width 七 ha 七 will give 七 he nav iic^s a 60 ⑽ is 七⑶七 look 
v*cja\rdlcss <>f -the length of the 


text-decoration : none; 
border-right : Ipx solid #777; 


#nav li a.active 
background : 


# 222 ; 


A d^v-k badkyou^d oy \ the “ad ： ive” dass will give 

七 he page l*mk a distmdiivc look and lei 

use\rs know whc\rc ihey av-c m 七 he si-tc. 


JTH Iff CtLLfCEOFHfWMEDIA 

HI ■ 屋 ■ mmm mi i^HivERsmf 


TK'is CSS ^ivcs us a simple, 
dledv> naviytio 灼七 ha 七 dashes 
-the usev-^s eye. All *thc Imks avc 
⑽ \w dlcavly scfav-a*tcd -fv-om 
eadk o*tV>cv* *too. 



i-n n 




ii mmwrniMM IwmmmiiAm nwrtflir 


enm 



® 0 ^ ^ 


•厂 




Home 



Stu 咖抱 

Faculty 

Aboul 





ICNM 

THvC^taifpi if Km klfdji 
ViMW iMI WTirWi 

IJtMW _ 

Emm ajiw 


NHV M«H« 

fhp Mp# hU^A _ Umr 車 1m ^-riiiPUlp^rn pa 

rriii^KflEin ■■羼 twiv^' I'jdr h Wm Ivlina 4 vi^l 

rpf kriarT-^^i. fhf Eurripiun vi^wafl Ib Wm 

ml riflvi^fl h — iL^ 凋 L'a'ii 

: b# indhrulugcjiri Wattaffl. * a jc Jik-A >ind£niBE_ 


■ ■■ nm 11 

wja»Qf¥i ； 

mknv 



Wvr CHM? 

rp*ifL , ta-^-ir^ Md c^rikwi «i kapJm 神 

*■ WMml m fthll n V« Mji ii ■* uwfei, khk. «, y^gla ^ 

feKTiiw^w. ‘寸 »-4 f ■J m ■ ■■ Tma iJ'Pv 

vwApg«n^prtc.wB mik w4 |4«» Th^ iw^pa fer^Jff**** w 


."II 麗 ， ii -fl r# mm. Irw 1 —fcifa ttw——I rf'iM I 

L -:- J 
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branding and icons 


Alright, you had a good point about 
using block navigation. It looks nice. But 
I bet youll agree with me on this... those 
little icons are terrible! 





Confusion is tke 
enemy of gfooct weL 
design. If sometliin^s 
confusing to you，it 
will proLaLly Le 
VERY confusing to 



Frank: Yeah, no argument there. What are those? 

Joe: I tried clicking on them. They’re actually navigation. 

Frank: Really? Where’d they take you? 

Joe: To different degree program sub-sites. One was video games— 

Jim: Oh, I bet that was the little icon that looks like a game 
controller, right? 

Joe: Right. But another was... 

Frank: Wait, let me guess. If the icons are good, I should be able 
to figure this out for myself, right? 

Joe: Ha, I guess. Good luck though. 

Frank: Let’s see. It’s a school for new media, so... web design. Was 
one of them web design? 

Joe: Wow, nice call. 

Jim: Wait a second... which icon stands for web design, Frank? 

Frank: Hmm. Honestly? I have no idea... 

Jim: My point exactly. We’ve got to do something about those 
icons. I didn’t even know you could click on them at first! 


your users* 
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smaft navigation 


Icons don't SAY awythiwg... they just look pretty 

Yes, icons are cool little design elements. The problem is, when used for 
navigation, they can cause some serious problems. What does an icon mean? 

What happens if you click on it? Where will the site take me? 


^ .. 

tiiis is dcba*t3blc. 


What one icon represents to you might be completely different from what it 
represents to another person. And if you use an icon as a navigational element, 
your users might get the wrong impression about where they will end up if they 
click the icon. The end result? The user’s taken somewhere they didn’t mean to 
go, and now they’re a lot more likely to move on to another site. 

Take the icons on the GNM site... how clear are their meanings? 


^Sharpen your pencil 


Write down what you think each icon represents, or 
what you may see if you click on that particular link. 
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using icons in navigation 


^Sharpen your pencil 
l Solutian 


Here is what the College of New Media says each of the icons 
mean. How close were you? If you got even two of these right on, 
then you get the Ambiguous Icon Detective award for the day... 


TVis item d web fajc a^d 

is meant *to mdi^atc web desi 沪 




The gamepad was used -fco v-cpv-csc^-t 
■the video jarwc design pvojvarw. CN/l/l 
七 hmks -this is a -to-tally obvious id 。 灼 . 


^ame design 




Pigital Writing 
备 Rhetoric 


TVis is a do 啪 mcmly used 化 cm — *tV^ c\ass\c 

Y^y\ and \>a\>cv-. \v\ tasc, i*t v-cpvcscr\*b 
aortal y/ritmj a^d r\\tb>r\C 



Woah, those icons are in all of our 
promotional material. We can’t lose 
those... \Ys just not an option. 


When in doubt, ADD TEXT. 


- _ Computer 

|^| ■ Ah|matioH 

This idor> is supposed "to \rcp\rcschi a n\df\ 
ov\ a dorwputcv- sd\rcc^. H Imks 
"to the dorwpu-tcv- d^imd'tioiD p\rojV-arw. 



Sometimes you’re gonna get stuck with a 
bad display element, or perhaps just some 
meaningless or confusing icons. If you’re 
not able to make major changes, one easy 
fix is to simply add text, clarifying the icons 
or explaining how to use a particular page 
element. 
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A little bit of clarifying text goes a long way to 
let a user know what to click or where to go on 



























smaft navigation 


Add icons to your text wot the other way around 


Right now the four GNM icons are little images inserted into the XHTML. If we 
want to add text descriptions of those icons, we’d need to squeeze the text between 
each icon, potentially resize the icon, align the text with the image... and things get 
pretty complicated fast. 



should ouv- \cov\ 

images be bo >wo\rk ^\{\\ *bc^*b? 



Game Design 




^ ow wc vc ^oi all kihds of 

with ih c 

dohhC ^ ,h 9 w '-th -the 


So what can we do? Suppose we started with text, like “Web Design” and 
“Computer Animation.” The icons are meant to be links, so we can surround the 
text with <a> tags. But once we’ve got <a> tags, we can style those with CSS. 


^ - 

Game Design 



A 

T^'is <a> ^ W s ^V lcd … 



LI 



■ it »ov sorn 


^hd put ih-to a lis-t 

some seWhti 匕 


With stylable elements to work with, we can get around all the position issues and 
actually insert the icons as background images to the <li> text items. That means 
the <li> will grow to the right size, and since each link is in an <li>, everything 
will naturally line up properly. 



1/Vc sc*t *tV>c badkyouiad imay fv-ofev-ty o( 

cadh <l*i> *to -the affv-opv-ia*tc \coy\ ar\A make 
suve l*mc uf jus*t 


?, y ^ auli ah , r a ? c iy ； ihe p^opevty will repeat Use 

: ly el d e S 一 d i 




background : #dddddd url('web design-icon.gif f ) no-repeat left center; 
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css background images 


Update the CNM XHTML to use textual links 

Let’s open up index . html and remove the icon images from the XHTML. We need 
a new unordered list, with <li>s and <a>s for each link. We’ll use the textual link 
name, and then in a moment we can update our CSS to style each link. 

Go ahead and make these changes to your copy of index . html: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict•dtd"> 

<html xmlns="http :/ /www.w3.org/1999/xhtml" xml : lang="en M lang= n en"> 
<head> 


<title>College of New Media | Mackinac State University</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8 M / > 
<link rel= M stylesheet" href= M stylesheets/screen.css" type="text/css" 


media="screen" 

</head> 

<body> 

<div id= M header"> 
<img alt="cmn logo 
<ul id="nav M > 
<li><a class= 
<li><a title= 
<li><a title= 
<li><a title= 
</ul> 

</div> 

<div id="subnav M > 


> 


src="images/enm logo.png" /> 


active" 
href= 
"href= 
"href= 


# 


title="CNM Home" href= 
： M #">Students</a></li> 
： M #">Faculty</a></li> 
： ,, #">About</ a></li> 


index.html">Home</a></li> 


This list 'rtem has a special dlass so ihai v/c ta^ style *rt di^crc^ly iht 
f iresi o*f-the I'rnb. TK*.S V/-.II adt aUost T.kc a title ^ 


<ul> 

<li class="option">Programs</li> 

<liXa class="webdesign" href = "#">Web Design</aX/li> 

'animation" href = "#">Computer Animation</aX/li> 

'game" href="#">Game Design</aX/li> 

'writing" href = "#">Digital Writing &amp; Rhetoric</aX/li> 


<liXa class 
<liXa class 
<liXa class 
</ul> 

</div> 

< ! — — etc . . . 

</body> 

</html> 

TKis l*mk list should be vc^ry — 
^ ^ Imk l.st Just r,akc sujrc 

i\\t coY\ia\v\tr <dW> a 




The # sighs a\rc just pladcholdcv-s -pov- lihks. 

wc have Uts h> lihk U well wUc 
the # sigh. 


B-SCh I'mk has *i*ts ovm dlass so y/C CBy\ dssiy 
idoy> *fco 七 he b3dk^v*our>d- 
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smaft navigation 


Now we can style our new block elements. 

Now you can add these rules to screen . css to style the subnav 
and related elements: 


#subnav { 

margin : 0; 
padding : 0; 
background : #d2dbc0; 
height : 4 6px; 

} 

#subnav ul { 

list-style-type : none; 


Por -the sub-^avigatio^ wc gave ID -to -the 
"that "the Imk lis*t. This ^ives us d 

little rnovc -Plc^ibiliiy y/i-th s-tylmg. 


Wc to yi r\A default Ullct fomts^osc 
aren't *to >wovk ^cv*c» 


#subnav ul li { 

float : left; 
margin : 0; 

padding : 15px lOpx 15px lOpx; This is -the vulc -fov- the spe 匕 ial list ‘ ii ./ 
font-s.ze: 1.4em; like ou, sub,av h^di.g. ^ us C o( 

isubnav 1,. opt.on { k C 忪 

text-transform: uppercase-; 

background : #b2bf99 url / images/option_li_bg.gif 1 ) no-repeat right; 
padding : 15px 25px 15px lOpx; 
color : # 7 f 8 e 6 2; 



screen.css 


#subnav li a { 

padding : lOpx 0 lOpx 35px; 
color : # 333 ; 
text-decoration : none; 


#subnav li a.webdesign { 
background : url(' 


Ea f rr mk ，h OWh 6,355 whidh 』⑽ wto ass— 

a ba^kg\rouhd -to /Wake suve 

you use the ho-vcpcat vUuc so you (Wt ti| e the 

i^agc ih the badk^ouhd. 



images/webdesign icon.png') no-repeat left center; 


#subnav li a.animation { 
background : url(' 


images/animation icon.png *) no-repeat left center; 


#subnav li a.game { 

background : url(' 


images/game icon.png') no-repeat left center; 


#subnav li a.writing { 

background : url(' 


images/writing icon.png') no-repeat left center; 


FBDORAM3 _ Web Design (g) Computer Anknatdon ^ Gama De 吨 ) n ^ Digital Writing ^ Rhetoric 








primary and secondary navigation 




Tesr DriVq 


Fire up your browser. Suddenly those confusing icons are clear, and you’ve managed to keep 
the icons intact... something the registrar thought was pretty important. 


ft no 

[nll^g 声办 f He^it LMrdm | Macicinjic; ^Inlr Unnvf-riity) 


卜卜丨丨 +如 __ 




f H' IH CQLLDGEOFtOfKOllA 

liwnfl- ShJOBiite FbcuIv *boul 

II 


PROCiRAJMS 


Wki Oa 叫 jfl 1^] Cftmjiuiar Am.TJicAn GArni^ Ob^q.i ragirfll Wwflg Hhftwdt 

部 



W^ikxima !□ Thu gf Kow M 谢 Un nl MiSU 

■ s3 Contad CNM 


ThH r^lttga nt Kmw Mkia 
M neklnac SIrIei Limvsrnjty 
1234 UpNOfmAw 

Ar^wtiar^ Ml 229M 


New Media 

I hm gl ^inui 

inl!ndiscip(ir4ry oaur 
■iRd in«0ry od FnbrmEit4n. In® curnAJlwn t^iat'^s lo invff^iga1« tn# 

crsRlfifla &wfibal to Elits ar&a of stMclv. r praparfl^ 

»udHits 1o be Iddvwlogicany capable^ artioulale rrunJKiers r ii/id cf&atve rn^dn 


Maris al M 


Miidunnc 
hi IJIff syslffli^ 


o 


Why CWM? 

Taday, Irli&fniaborv .is b«eorriMig f*M t ouuinLHRj^ flrvf ㈣ 抹 anlFy THit 

hit ehj»d a shffl in tn crjuba, accbba. u» r b^de-^Bjnd 

flrul diirfribuu rtarmutan. Tha advfmr Jina cui^rgarNEA al now daitv 
btdi raa logics, and iitarmnlbn maamna haoi n kind kid iHmi rfllnikinrih^p pF Ibfi 
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smaft navigation 


Primary navigation shouldn't change... 

...but secondary navigation SHOUIP 

Primary navigation is the navigation that provides links to the main 
sections of the site. So with GNM, our primary navigation is the top-level 
blocks, with Home, Students, Faculty, and About displayed. These links 
should be displayed on most (if not all) of the pages in your site. 



Secondary navigation is navigation that links to subsections of the 
site. Secondary navigation should apply to what’s going on with the 
page and where the user is at a specific time. 


PROQHAMS _ Web Design _ Computer Afiimatran ^ Design ^ D^gHal Rhaloric 


七 he home page, -the sub-^avigatio^ ^ives US 
Imks "to "the various douvsc pvogvarws available- 


Suppose someone clicks the Faculty link on the GNM page. The 
primary navigation links still make sense, but the secondary 
navigation — the program links — probably don’t anymore. What 
about on the About page... should those links appear there? 


Create a page for each main section of 
the site: Students, Faculty, and About 
(you’ve already got Home as index.html). 
Just copy and rename index.html over 
to three more files. Then for each new 
page, change the title to match what that 
page is about. 

Next, use the IA diagram on page 198 to 
update the secondary navigation on each 
new page (don’t worry about the main 
text content for now). 


秦 : 


ExGRaSe 


Primary navigation applies to 

your wrm site. 

Seconctary navigation applies 

to tke CURRENT SECTION 

of a site you’re on. 
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coding secondary navigation 


Each sub-page gets its oww secondary navigation 


Open up the page you created for the Students section. We called ours 
students . html. We need to change the title and update the secondary 
navigation based on the CNM’s IA diagram: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 


"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict•dtd M > 
<html xmlns="http :/ /www.w3.org/1999/xhtml" xml : lang= 

<head> 

<title>Students | College of New Media</title> 


en" lang="en"> I- s ^ould 


<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 
<link rel="stylesheet" href="stylesheets/screen.css" type= M text/css" 


media="screen" / > 

</head> 

〈body class="page"> 

<div id= M header"> 

<img alt= M cmn logo" src= n images/cnm—logo • png’， / > 
<ul id="nav M > 



Wc added a 山沾 so 

^ wam 


<li><a title="CNM Home" href= M index.html M >Home</a></li> 

<li><a class="active" title="# n href= M students.html">Students</a></li> 


<li><a title="# n href= M #">Faculty</a></li> 

<li><a title="# n href= M #">About</a></li> 

</ul> 

</div> 

<div id= M subnav M > 

<ul> 

<li class= M option">Students</li> 

<liXa href="#">New Media</aX/li> 

<liXa href="Our facilities">Facilities</aX/li> 

<liXa href = "Apply to the CNM">Applying to CNM</aX/li> 
</ul> 

</div> 

<div id= M wrap M > 

<p class = "crumbs M >Welcome to The College of New Media at MSU</p> 
<div id= M content M > 


applies *to site, so 

p 一 a” ? 二 出 JfW 虬 wW 

切 s ^ saw 州⑽州 c 

% keep the opii 0h class 
ihc label 
Uich 

u OWr a^-tivc 
The ^ 

r ihe <ul> <li>s 

tased o, the 4, -this 

pa^-t the C_ siic. 


<p>Content</p> 

</div> 

<div id= M sidebar M > 


<p>Sidebar</p> 
</div> 

<div id= M footer n > 


<p>Copyright &copy; College of New Media at Mackinac State University</p> 


</div> 
</div> 
</body> 
</html> 


<script src= J, ... 1 
js” A : 

<img j 

srcs^siteLogo. 1 
png”/> j 
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students.html 
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Lefs style the navigation with our CSS 


Now that we’ve got some actual secondary navigation in place, we can add 
some CSS rules to style the sectional pages. Each sectional page will have a 
body with a class of “page,” so we can style those separately. 


#subnav { 

margin : 0; 
padding : 0; 
background : #d2dbc0; 
height : 4 6px; 

} 

#subnav ul li { 

float : left; 
margin : 0; 

padding : 15px lOpx 15px lOpx; 
font-size : 1.4em; 


#subnav li.option { 

text-transform : uppercase; 

background : #b2bf 99 url ( ' ../images/option_li_bg.gif') no-repeat 

right; 

padding : 15px 25px 15px lOpx; 
color : # 7 f 8 e 6 2; 


#subnav li a { 


padding : lOpx 0 1Opx 35px; 
color : #333; 
text-decoration 


leis us siylc body (or scdiio^al pages 

-rov the rwaih ’mde 乂 Ivtrwl 

padding : 15px; 


none 


Notice -the page dcdla\ra-tioK>? Thai's icllmg CSS -to or>ly 

apply -these \rulcs i-f -the <body> has a dass 二 1 Va V. This 



.page #subnav li a • active^U^__ This paddmj will make suve -that ouv- adtivc av\d 
background : #b2bf 99; hovev s-ta-tes -Pill tiic v/liole blodk. 

} TV^is dav-k yr^ ^ 3 Wc ^ovcv- av\d attwe 

states a cWcdt U 必 cmdary Uks. 



TWis is ^ same CSS wc used vest 

i\\t site. Now \i scdt'ion pajes -too. 



screen.css 


you are here ► 


223 




breadcrumbs 



TesT DriVq 


Create students . html and update index . html to link to your new section page. 
Be sure and update your CSS. Create pages for the Faculty and About sections, too. 

Then it’s time to try things out again. This time open up index . html and select 
one of the main links: Students, Faculty, or About. On each sub-page, you should see 
secondary navigation that matches the site’s IA. You also should get a nice green color 
when you hover over a link: 



has ih OWh 
冰你 dairy havi 碑 0h . 


sc 6 ov\dav 7 Vmk 

batk^v-ou^d dolov <k 
i\st blotk -to 


Canfoct CNM 

Th# CoAigci qI New IhcUi 
MliduniK： Sl^lv ynlnrolliir 
丨， l£^ 4 UpKoHhAvfi 


New MecJEh 


Tfm Mm Madaxl UjMdonac SCmIei Uhnftriitf 'Qltmw 

IrtlafdiioOknijry 印 urn gl pMty n th» 
uid Vmc£^^t iiAgrmaSigii. Ttla purn£yl#n 
^_Imp _4 iffiM pitmsmw ffwnttillp UW _%■ _ p 

ItiKkmlilg bf> ftKhno4q>giqailv £9 $uUd, miio^xiSai thnkiaim lend 
Eirati#ppriJlL 
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smaft navigation 



Your Web design Toolbox 

You’re over halfway done and you’ve 
tackled navigation. Your sites are 
well-organized and people can actually 
get around in them. Up next: writing for 
the Web. Sounds easy ， right? Just wait 
until you read on... 




BULLET POINTS 


■ 


■ 


■ 


■ 


■ 


■ 


Use your site’s information architecture as the 
foundation for navigation. 

Primary navigation is the navigation that provides 
links to the main sections of the site. Secondary 
navigation is navigation that links to subsections of 
the site. 

When naming your navigational elements, make 
sure you use labels that are both short and 
descriptive. 

Horizontal navigation designs work particularly well 
with one and two-column layouts. 

If your site has a vertical design for its primary 
navigation, make sure that you don’t put secondary 
navigational elements higher on the page. 

The goal of navigation is to tell your users where 
they are in the overall architecture of your site and 
provide them with the means to make decisions 
about where they want to go from there. 


■ 


■ 


■ 


■ 


In order to avoid confusion, make sure you keep 
your navigation consistent across your entire site. 

Make sure that your users can learn your 
navigation system quickly. 

Breadcrumb trails give the user a visual indication 
as to the location of their current page in the site’s 
overall information architecture. 

Never use icons (on their own) as navigational 
elements—what an icon means to you could 
be completely different from what it means to 
someone else. 

If you want to use icons as navigational elements, 
make sure you also use text in order to provide a 
clear indication of where your users will end up if 
they click on the link. 
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7 writing the Web 



Yes, you scan! 


Wow, these articles are great. 

I wish they were available online so 
we didn’t have to share this paper. 




Writing for the Web is just like any other kind of writing, 

right? Actually, writing for the Web is completely different than writing for 
print. People don’t read text on the Web like they read text on a printed page. 
Instead of reading text from left to right, beginning to end, they scan it. All of the 
text on your site needs to be quickly scannable and easily digestible by the 
user. If not, users won^ waste their time on your site, and they’ll go somewhere 
else. In this chapter, you’ll learn a bevy of tips and tricks for writing scannable 
text from scratch and making existing text easy to scan. 


this is a new chapter 



reading on screen vs. reading in print 

^Jharpen your pencil_ 

< Text on a screen reads differently than text on page. This is kind of a big deal 

when it comes to writing for the Web. But don't take our word for it, give it a try. 

First, read the text at www.headfirstlabs.com/books/hfwd/chapter07/text/ 

index.html and keep track of how long it takes (write down your time below). 

Now, read the version below and make a note of how long it takes. 


Goleco Industries, which was originally named the Connecticut Leather Company, was founded 
in West Hartford, Connecticut in 1932 as a shoe leather company by Russian immigrant Maurice 
Greenberg. Moving into plastic molding in the 1950’s，Goleco eventually sold off their leather 
business, and became a publicly traded company. By the beginning of the 1960s, the company was 
one of the largest manufacturer of above-ground swimming pools. In 1976, after an unsuccessful 
attempt to enter the dirt-bike and snowmobile market, they released Telstar, a clone of the home 
PONG unit being sold and marketed by Atari. 

Despite the fact that Goleco was certainly not the only company releasing home PONG clones, 
they enjoyed moderate success and went on to produce nine more varieties of the Telstar unit. 
Unfortunately, in 1978, as the home video game market moved to programmable, cartridge based 
game units, Goleco was forced to dump over one million obsolete Telstar machines at a nearly 
crippling cost of more than 20 million dollars. 

Goleco president Arnold Greenberg ignored this near disaster and directed his Research and 
Development team to begin work on a new home videogame system, the ColecoVision, which he 
felt would set the standard in graphics quality and expandability. 


Time to read online version: 
Time to read print version: 


Which took longer? 


Why? 
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writing for the web 


o 


Aww. Cmon, just because I read 
the online text a little slower 
doesn’t mean that people always 
read slower on the web! 



Frank: Woah, hold on there, buddy. Actually, it does. See, text on screen 
reads slower than text on a printed page. People read about 15% slower 
on the Web than they do from a print document. 

Jim: You’re kidding. All the time? Wow. That’s quite a bit slower. 

Frank: And that’s not all. Move your eyes really close to your computer 
monitor. What do you see? 

Jim: Ack, that’s nasty. The text gets blurry and fuzzy on my screen. 

Frank: Exactly. You read slower on screen because computer display 
devices have a far lower resolution than print does. 

Joe: Oh, I get it. I read slower because my eyes are trying to make up for 
the blurry text? 

Frank: Exactly. And you’ll probably experience eye strain faster than you 
would if you were reading from a print document. So people read text on 
screen differently than they do other kinds of text to avoid eye strain and 
headaches. 


Jim: But they don’t know you’re doing that? Reading slower? 
Joe: Did you realize you were doing it? 


Jim: Huh. No, I guess not. But how does this help me write text for my 
websites? 


Frank: Users scan your text, looking for keywords, sentences, and 
paragraphs that are meaningful to them. So if you write text that’s 
specifically designed to be scannable, your users will read your faster and 
understand and retain your message better. 


Joe: That sounds like the holy grail of copywriting. Are you sure you’ve 
got this right, Frank? 

Frank: Yup. Scannable text gives users a better experience on your 
site — which means they’ll stay longer and come back more often. And 
that’s the whole goal of user-centered design: giving your users what they 
want and keeping them coming back for more. 
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test your comprehension 

^Jharpen your pencil_ 

^ Grab a stopwatch and take exactly 20 seconds to read the block of 

text on this page. Then answer the questions below the text. But 
don’t cheat: look at the questions only after you've read the text. 



TW»s 州 adWmc 

•,s a Co\tto\/\s\o^ 


Goleco Industries, which was originally named the Connecticut Leather Company, was founded 
in West Hartford, Connecticut in 1932 as a shoe leather company by Russian immigrant Maurice 
Greenberg. Moving into plastic molding in the 1950’s, Goleco eventually sold off their leather 
business, and became a publicly traded company. By the beginning of the 1960s, the company was 
one of the largest manufacturers of above-ground swimming pools. In 1976, after an unsuccessful 
attempt to enter the dirt-bike and snowmobile market, they released Telstar, a clone of the home 
PONG unit being sold and marketed by Atari. 

Despite the fact that Goleco was certainly not the only company releasing home PONG clones, 
they enjoyed moderate success and went on to produce nine more varieties of the Telstar unit. 
Unfortunately, in 1978, as the home videogame market moved to programmable, cartridge based 
game units, Goleco was forced to dump over a million obsolete Telstar machines at a nearly crippling 
cost of more than 20 million dollars. 

Goleco president Arnold Greenberg ignored this near disaster and directed his Research and Design 
team to begin work on a new home videogame system, the ColecoVision, which he felt would set the 
standard in graphics quality and expandability. 


o 

❺ 

❺ 


What was the name of the home PONG 
clone that Coleco released? 

What was the name of the man who 
founded Coleco? 

Who was the president of Coleco 
in the 1970's? 
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writing for the web 


Now try the same thing with this block of text. Don’t cheat! 
Be sure to read the text before you look at the questions. 


The Release of the ColecoVision 

GolecoVision was released in the summer of 1982 at a retail cost of SI 99, featuring several 
noteworthy advancements: 

The ability to display 32 sprites on-screen at the same time 
A 16 color on-screen palette out of a total of 32 
Three channel sound 

Donkey Kong: The Key to the ColecoVision’s Success 

The key to this new system’s success was its included cartridge. In the case of the ColecoVision, 
Goleco successfully negotiated the right to release the smash arcade hit Donkey Kong. 

Donkey Kong: Legal Problems with Universal 

While amazingly popular, Coleco’s release of Donkey Kong with the ColecoVision was not 
without its problems. Universal City Studios Inc., believing that Donkey Kong infringed upon 
their own King Kong, threatened both Nintendo and Goleco with legal action. With a large 
sum of money already invested in the license, Arnold Greenberg agreed to pay Universal 3% 
of the net sale price of the game. 

Coleco Caves and Nintendo Fights Back 

Unlike Goleco, Nintendo fought the lawsuit, offering numerous in-court demonstrations of 
gameplay vs. movie plot. Nintendo argued that in a previous case, Universal had argued that 
King Kong’s characters and plot were in the public domain. Nintendo successfully argued its 
claim and was awarded SI.8 million in damages. This prompted Goleco to file as well, earning 
back a portion of the royalties they had previously paid to Universal. 


■ 

■ 

■ 


o 

❺ 

❺ 


How many sprites could the 
ColecoVision display on screen? 

What game was included with the 
ColecoVision? 

Who sued Nintendo & Coleco over 
copyright infringement? 
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what did you remember? 



So you took exactly 20 seconds to read two blocks of text and 
answer questions on each. How did you do? 



What was the name of the home PONG 
clone that Coleco released? 


❺ 


What was the name of the man who 
founded Coleco? 



Tclstar 


TWis >/as W\r'icd m i\\t 

h\rs 七 P'«d you 

•f 'md i*t? 


Mauridc 


Yo^ay have this ©he 
eas| ly. That's because -the 
ahswcm was c 扣 ly i h 仏 c 
pamajiraph of text 



Who was the president of Coleco 
in the 1970s? 


Av-^old 


Did you get as -Pav- 
3s -this bi*t o( ir>-Po *m 
tv/c^iy setor^ds? 



How many sprites could the 
ColecoVision display on screen? 


丁 to 心 •… 七 ^ 

casv 代 ⑼. 

VI 


❺ 


What game was included with the 
ColecoVision? 



Who sued Nintendo & Coleco over 
copyright infringement? 


Donkey ^or\^ 


This was vcpca-tcd scvcv-al 

ti^cs as well as stav-tihg the 
sedohd "Uiivd licddlihcs. 


was 


easy -to act, as it 
m a keddl'me. \4u\r eye was 
(~ au-tomatuially dv-av/h -to the 
Universal bold text. 
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Text written specifically to be scannable is easier to quickly 
read and understand. One of the blocks of text was written for 
scannability, one wasn't. Which do you think it was? 













writing for the web 


Puild a better ov\\m newspaper 

A local alternative newspaper was so impressed with the successful 
launch of the RPM record store site that they’ve decided to hire you to 
create an online version of their print newspaper. 

Although the paper’s always had well-written articles, they’ve been 
struggling lately to keep their readers. The Editor-in-Ghief also wants 
to cover more than just news on the paper’s website. He thinks adding 
hip articles on computing and gaming pop culture (geek chic) will 
appeal to readers. The biggest challenge for this project isn’t layout — 
it’s writing text for the Web. This new site’s the last chance to save their 
paper, so they really need your help... 


Chf iiipsrcr 3nrfl[igtnm 


I can’t thank you enough for 
taking on this project. Before 
things get started, could you 
show me a concept on paper for 
how the site will look? 


fnHWVTIHI 


Building a FLvie 

1 -^jppv ■■ 
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a spec to work from 


Hipster iHtelligencer Onlme: project specs 

Before you get started, the paper’s sent over some specs. This will help 
you refine the look and feel of the site you’re building for them. 


The site must have three columns to facilitate 
a large amount of content and retain a 
“newspapery “ look and feel. 


2 . All markup (both HTML and CSS) must properly 
validate with the W3C validation tools. 

3 There must be an area on the home page to 
• place an image that will serve as the visual 
element for the featured article. 

4. The title The Hipster Intelligencer vc\us\ appear 
in the upper third (top fold) of the site. 

5 use at least a three-color scheme in the final 
design. 


^ Uyy iizjt the 
匕 olunrms usih 0 -the 


p,vst HTML 60 VCVS 


is y\o deal. 


^ a loi abou-t 

Cololr ih Chap-tcv- 7hi s 
° hC be a pv^oblcr,. 


The problem is TEXT 

None of these specs look like that big of a deal. However, there’s one 
major issue not in these specs: the Hipster is mostly text — lots and lots of 
text. So we’ve got to build a text-heavy site that still feels usable and hip. 
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writing for the web 
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finished storyboard 




SOLVtloH 


You put together a polished storyboard based on the specifications for the site. How does yours 
Compafe -OHOW many colors did you use -o 
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writing for the web 



Reapy BaK^ 

■V 

Cope 


Here’s some basic HTML and CSS to get you 
started implementing your storyboard. 



<-DOCTYPE html PUBLIC -//W3C//DTD XHTML 1•0 Strict//EN" 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> ” 

<html xmlns="http:/ /www.w3.org/1999/xhtml" xml:lang- en lang 

<head> 

<title>The Hipster Intelligencer</title> , , f 8 „ 7> 

<meta http - eq uiv-Content-Type" content-text/html; charset=utf-8 /> 

I ：!! ^^： yl es h ee t ^ 一” 一 咖 .咖”七萨”恤/咖” 


</head> 

<body> 

<div id="wrap"> 


<div id="header"> 

</div> 


<div id=”content "〉 

<div id= 

"main "〉 

</div> 


<div id= 

"center "〉 

</div> 


<div id= 

… sidebar"> 

</div> 



</div> 

</div> 

</body> 

</html> 



TV^ese <dW>s 』 
V,old ovav 6 

扣 d ^a^ s * 

tV>c^ ^ 

CSS at v •科 


po^-t ^ lmk 

7 o^ css W 

The Hipster CSS File 

CSS dornrhCh-ts ： 

} y { 

3。 ahead "type 

/* you waht 

^ dd global rules here (hi, h2, p , ul , etc .. 

#wrap { 


#header 


RcmCmbcv* 养 siy> 

v-cfvcsc^*b id \y\ -the 

HTML flic. 


#content 


Stop! Be sure and create these 
two files before you move on. 


Now we need some content 
so we can add some style... 


#content #main 


#content #center 


#content #sidebar 


















add a dash of content 



Wow, this is coming along great! 
Could you use this article Ive 
written to show me how content 


will look in the design? 


Che faster Inttlliscnctr 


DAUY HIPSTER NEWS t EVENTS 


Website copy 


In 1973, Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don 
e founded Tactical Studies Rules in order to publish the rules for Cavaliers 
and Roundheads, a miniature war game based in the English Civil War. 
While Cavaliers and Roundheads was the initial focus of Tactical Studies 
Rules, Gygax and Kaye also wished to publish the rules for Dungeons & 
Dragons, a fantasy miniature role playing game developed by Gygax whose rules were 
based on Ghainmail, a medieval miniature game developed by Gygax and Jeff Perren 
in 1971. As Cavaliers and Roundheads began generating revenue for Tactical Studies 
Rules, the partnership was expanded to include Dave Arne son and Brian Blume. 

While Dave Arneson was brought into the partnership as a game designer, and left 
shortly thereafter, Brian Blume entered as a funder. Blume believed that Cavaliers and 
Roundheads was not generating enough revenue, and encouraged Gygax and Kaye to 
focus their efforts on releasing Dungeons & Dragons. 

There is considerable debate as to the contributions that Dave Arneson made to the 
initial development of Dungeons & Dragons. While Arneson has labeled himself “The 
Father of Role-playing,” and has said that he was responsible for writing 



Don’t worry! All this text is available online 

Check out www. headf irstlabs . com/books/hfwd/chapter7/ copy. html 

to get the full text you’ll need to complete your site. 


238 Chapter 7 







writing for the web 


Tost DriVq 


Now that you’ve got the framework for your site built in markup, add the content that 
the Editor-in-Ghief has provided to the main content section of your HTML page. 
Remember, you can download all the copy from the Head First website. 



Open the new Hipster page in your browser. How does it look? 


thereiare no o 

Dumb Questi9ns 


Do people really read that much 
more slowly online? 

Yup. Lots of scientific studies have 
come to the same conclusion, but you did 
your own experiment with the 20-second 
reading test and found the same thing, right? 


Hmm. Okay, but that two blocks of 
text didn’t seem all that different to me. 
How come I remembered so much more 
from the second one? 

It’s all thanks to chunking—breaking 
down content into smaller easier to read and 
understand bits. Sounds simple, but it's a 
killer tip for getting people to read more of 
your site. Well take a look at how over the 
next few pages. 


So you mean I can apply these 
principles to my blog? It’s not just for 
online newspapers and long articles? 

Absolutely! You can apply this to your 
blog or any other text you know folks will 
have to read on a computer screen. 


you are here ► 


239 












loooooong text 


IIie tiipMu InLtJllgcncEP 


二 S:uA 


m oW. 
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!^iZLn3lizvi>'>iMib^. ii hcl 1 Jlcpouit bitsLDC^ owned b^ 1 one Qfdic Dluriic^ jclmivcii-. tn jdiJiiuin. TSR. Ilobbiw.】rx w 如 
Krfujrfc^tily DVdc^utkd rilu! reAjli>Oil ihe Uluinr^ rwpeiisn^. litrelidr. K«in U'Iuptii! had .yrwwiy -nvrpnnitfd miUmois-^l 
cupiC% c\i LIil 8 pn^'&Liudy 埤 imilli-puili jlcinj^'miv 枚 llraj^Lin^ Milvi:n(ii]V ni u biuji V 化 “d mil he whl In am 

ellinrl In nn£i|j! ； i^ lb? iim 吒 Hiding 101 ^^ 1:11 iimtiUeTiiK^ TSR || 【 iMiiv% w:iv rv^lnii; 如 c^il inli^ biur HHUfiuiii^ TSR, liw R TSR 

^'cnniirw. TSR biix^Diuiiiil amt TSFt IlnonuirLnbCfir. TST taiz. cominucd u nynuluizunr ibc ccuifiQiky^ctfirL 1 Dun^coeis 及 
nr-nj^Biipli； pluyirn; prixiu^^ iMt V^rmim hNgu^ij imi (he pnxiLHi^n «f p|oi4!c^ Md wys m Aga. T5K tncflnaiwiu! 

\\mi lEitnc 1 , IiL'^ii^ini]； lltiJ pn.'Nly^lKiri TSH； hnlcrUimmpnl, 
init 1 Edi DurL^nHm Elr^jiTns Fnt^fftiiimi^nl C'dirpcinlh.in, 

EJiyikci^ mch as mo^ic ond ivli^ iskin. L'nfinniini]^]^ rSR 
l^rbs & Uragarw Upon muInfiE^ Uv^as hJd $44 

Kpiny limn^n LnfiHmi; Inutii l JSlii^^liiiii 


Wow. That online version^ long 
and wordy. There’s got to be 
something we can do to make this 
easier to read... 



K ILUI .1 LlhUUj ； Ill9f1JI；l Lin txilh i?l^ll：lL .iillil IMHH ： lir ； !.l.l ^J,llfe：% (Jn. 

iVrtkinnh^t ^hivk miiu^n ru4i-Ji^l^ilh than any olhc r 


n0|T^ ih :! [nkiNE 4,'iKmLinE I^^jI um\ liin.nx'iLiL ImuU'l. ^ TS R Iuj .1 .： b^EiiL |； 
fii^hl 如 iirvuif t^iat TSR luz ： bad nK>rv lltii^ilI on llw cnE 
company Uiihe lu 如 ry 朴 ] pimc^. Nm wily are rvmiiy cuatpuicr role pla>jn^ ^nii» bau:d «i it\c iiKhn>pc> uml mcclun^^ 
Ikr^i uiE^yJuf-cd m EJun^n^ & Dr^on hui nuny ti [lie luminance m iIk lusror oS di|fiml gofnes w^k firgady in1hjeiK<vj 
h\ rSR ^rKl ilh \:in.iik< piialu 巾 t'SR^ prLHSii^lK lu^i ； liKi|j iiou:i; pji^vg^l jntki 加 i^jilrTiH^'p^ubrfulliiT^ 
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Founik^J in I by Gm>' Ch )i.\K and Dl'h Ko.yi ； on an ^vnmiul mctm^ hi publ^hu »]l. ilisinliuni ： dii ； iuk>uf Dungcufif 
Ai Uragtm ■ ^iK Hvcm on w Uccoriw «H] ol ibt mos\ ehsi™ cnia) - conip-iinbn; tfi Gic cmcrusnnfKm |lmi^ iruduiiy. Wlialc 

I 释及 [h^iuih vi^nE «ki Ui tuiv a u^;niriv:in| Lnlviif imfiKnl m\ h4l) dj^ciMl aii]. iinn-iJiy_iU.il yiinii ■- I \R, Jt-: ;i 

L'liqhindL 1 LTilily ■仏 pi.Thjips \w?,\ Liuimti [itriLk. |in.im.'i：jL u lR'^ jiilI Llfr hjlL^T f^inHiL'L \\ui\ nri^Li lh ci irm iiu'rJiqi Lif Lhr 
com^y ^nd if ： uibcIIhiuaI prapcn\ 


ufk^ os i rnutl ^ffiahisuiu^cmcnl. L\ tintual^. Ibolli K^vw ami, 
IjJtcf Hcmg wiL-vd tin mi^usinf corpormc iundi- iiid accuiiiui^iin^ 

1^ Xv|ui^niLin^. ]n ihc ^akjf ^1 die Lilun^'f tJqiamiit fpqri eIic l!Hv^d 

ci |inriLLl L'4Hilml u^lhc t>?n^i:-iin ISuvi^vlt. imhcliiAihi hi 

^ with LoiruiK j (xHteiituI ^lor vHio lud 

\q\i\K iheir M lwfi WiUmiTK IlnaEJy squired ^ 

i%Y 曲 f dcdprvd jltc^aL UnliM^JRpict.y, die 期 iaiE^i, 明 4 

'xilil his romiiim^ r kjhicL lu 'W.illLanu :iri4t usotil llu: cjgn£j| Eli Jlirm j ruru CHHnipjmv vn^ilJal Nlh IntlmK E^^liiclinnh 

The ifcfiunure 4*TG>_fMic friwiiTSIt imcpajdlily L'lun^ed ihf fkeni'thc comfMny. TSR : iiKccsiiill>- cxjpaiMleiJ ini£> areas 
^j€h df nugoytfle^. p^rtueik ikiii^. ^nd ctMiidf In aiLdiEkHi, ilic wicaiod po^uLkf nw Kilti-plaihiiig 

mcl||Jin^.|?m^inliin£¥ , l Plav-mlilL |-tMiLfllcra KlmEiik, untiljiyi'lLiu'^., ol| ut Vhiiidi lui^k~'h.id ;in [nJimnE BT^UKl i-in 
(lii； ijhlrMifi Ljnl'ii'.i[M 

HtmTUT, llu." dimpiiiy was- urvsnBc id ^Lifu hi ilif ewnmucd ] 口明 k^uruci dtilx 1 mbkoDp KPti conui^iniry' ji w 

prv^u^tdi v - ■•: k la in 加 ^llon ^ eom w in ibc drawrfi^Bi card ： yamc 

iiuricl, TSH m mtHl'k pntdiu^Ei, us HugLm PiLT ;irn| Spy'll El rr, whh,'K itnifiiyiLul mil 味 II Ttn - i^nvnuMid 

fkmrK ial spiril 作奸 iiloJ Ik rkl ]hn\. they fi[L\JuU cv^nlmuckJ M pcrriimn poorh in Mk m.irkctpbd TSR 

bcpjn h> huaci. ih#ve w\v^ n bdievod inlnn^eid on its mnzDfcuuJ pj^peny. lt\c ^I'iIkwc Bc^al liudizd 

nt^ i,vnh» ftihci Avpanaim J hue irnln'i^ujlj iam tn aijnlionni|j l3f! IIciimi ^ D^13 Ion rmxjplcsk 

The rv«u|l iif tlit^' Ji'linitN vi'lluJ T.SiR, is\i\ vi iiEtrU pt：n;i;i.v^L ,：.n dln,'i;lJy jllat'kin^ di i^kfticnfn 

Jq t 今 97_ .is.TSiR Dpciroo^hiMt rtceiv i\k cufTipjny and dll Df iu uicelkYnul pnoptny ^cquinod ； 13>' WiMrds mhlw 

Cftia. IromhiJll 卜 U uorik c>MtK < (m 认 IikH 巧必 now widely 4Ziw&hlLTi!i3 to tv ihc p^^umcai uAIcdop wic pbyui[E yiim. L 
^Liinptjny h;id hem rL^|niii^ihiL' jiu |iuh]i^i 旧 [；; }l\i; 4 i:i[]iLnnf lh.' vi liniv ci.'nuirk;ihl^ }iml hv'vri 

n_’iN 、 ihU_ in (h? ps>Dn^>bk; pun| upi^l. A f^T Ihc ujI? tu Wi 抑 nls 朴 I_!Iil_ wtiipfa continu^L 抑 

piiS^I 此 DuRiicons ii w dim dijf. T!>E wsl ： sfcwly iisnKJhik'd. Id !it03 itu." tinal TSEt audfmAiV^ ^ fit «lto^ w 

apiw by Wyarifc Lit ihc L'o^l. 

;l c\n hi.ilb iJi^iluli J.111I iMin^liviul [pim On? 
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writing for the web 


Improve your cowtcwt with the Inverted Pyramid 

A low percentage of people scroll beyond the information that’s 
initially visible in their browser window. Even if your users are willing 
to scroll, most of them decide whether they want to read the page 
based on what they see in the browser window when the page loads. 


To account for this, you should structure your text like an inverted 
pyramid. Start with a short conclusion so that users can quickly get 
the gist of the page, and add detail afterward. This way, users can 
stop reading at any time and still be confident that they’ve already 
read the important pieces of information. 


Put the most imj>ov-taht stu-f-f 

at the -top o-P you\r text. Uscv-s 
should be able io vead youv- f 

a^d get the idea o-f 
the whole picdc- 


Main Heading 



A little body text to give the user some context and a 
brief introduction to the page content. 

Then maybe a few bullet points 

• that contain the highlights 

• of the page content. 

Another heading 

Some more body text that 
gives the user more 
detail about the 
content of the 
page. 

And so 




on... 


Coy>*tch"t that’s p\rog\rcssiv/cly 
less CVCh thougli i 仏 

still v/dl-y/H-ttch. Stu-Pf tWs 
not csschtial -to the usev-s 

uhdc\rstahdihg o-f the av-tidlc 

匕 30 dovm licv-c. 


you are here ► 
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inverted pyramid exercise 




ExeitciSe 


Here are two pieces of text. One was written using the inverted pyramid, the other was not. 

Read both, but stop reading when you feel that you’ve gotten the gist of what the article contains. 


o 


Avalon Hill, now owned by Hasbro and operating as a division of Wizards of the 
Coast, was a tabletop game company specializing in war games and strategic board 
games. They were not only responsible for pioneering many of the key concepts of 
modern tabletop wargaming—such as the hex grid and zones of control—they were 
also responsible for publishing some of the most recognizable titles in the board game 
industry such as Civilization, Axis and Allies, Runequest, and Dune. 


In 1958, Charles Roberts founded Avalon Hill in order to capitalize on the success of 
his game Tactics. Self-published in 1952, Tactics was particularly noteworthy because 
it was based on actual war tactics and scenarios. As such, Tactics is considered to be 
the first modern tabletop war game. Shortly after the company was founded, it released 
Tactics II， the sequel to Roberts’ original game. Shortly after the release of Tactics II ， 
Avalon Hill published Gettysburg, which is widely considered to be the first tabletop 
wargame based upon an actual historical battle. 


Avalon Hill enjoyed moderate growth through the 1980s and early 1990s. However, 
during the mid 1990s, the board game industry as a whole began suffering a downturn 
in sales. Not only had overall sales of their board games decreased, but the company 
had also lost the rights to two of their most popular games, Civilization and 1830, in 
a legal battle with the computer game publisher Microprose. In the summer of 1998, 
Eric Dott, president of Monarch Avalon, Inc. (the parent company of Avalon Hill), 
sold the rights to all Avalon Hill titles, all back stock, and the name company itself 
to Hasbro, Inc. Hasbro continued to publish games under the Avalon Hill name. In 
late 1999, Avalon Hill was made a division of Wizards of the Coast, who had been 
purchased by Hasbro earlier that year. Wizards of the Coast continues to release games 
under the Avalon Hill name, including Axis & Allies, Betrayal at House on the Hill, 
RoboRally, and Risk 2210 A.D. 
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o --——-- 

Warhammer, which is currently in its 7th edition, is played using player-selected armies of 
25 mm - 28 mm plastic or metal miniatures. The game rules (as well as storyworld material) 
are published and released in a series of books (some of which are core to gameplay, while 
some of which are supplementary). The game itself is generally played on a surface, the 
standard size of which is 4x6 feet. While the game can be played with just the miniatures, 
players will often use model scenery, such as trees, buildings, and topography, in order 
to add realism and depth to their game. Each unit (either a single miniature or a group 
of miniatures) has a point value based on their power or skills. Players build (or “draft ”） 
an army based on an overall point value set by the game type. For instance, a 700 point 
game means that each player can build an army totally 700 points or less. Movement 
across the playing surface, which is turn-based, is measured in inches and combat between 
units is accomplished through use of six-sided dice. Victory in Warhammer is most often 
determined by victory points, which earned by killing enemy units and meeting scenario 
based special objectives. 

It’s important to note that Warhammer is not a collectible game. As a result, miniatures 
are not sold using a closed-box, random model. Players simply pick and choose the 
miniatures they want to have in their armies, and buy them individually or in large sets. It 
is also important to note that Warhammer miniatures do not come pre-painted. It is the 
responsibility of the player to paint their own miniatures. As such Warhammer is somewhat 
of a niche product as it requires specialized skills to fully experience the game. In addition, 
unlike other pre-painted tabletop miniature games, such as WizKids’ HeroGlix, Wizards 
of the Coast’s Star Wars Miniatures, or Fantasy Flights Games’ Mutant Chronicles GMG, 
the Warhammer community has a unique system (which is both formal and informal) that 
recognizes particularly talented miniature painters. Generally speaking, Warhammer is 
most commonly played in game stores, hobby stores, and comic stores. In addition, Games 
Workshop organizes a Grant Tournament season each year in which players compete 
against one another for community-wide recognition and prizes. 



Which was easier to read? 

Can you identify the text written using the inverted pyramid? 

How do you think the inverted pyramid makes text easier to read? 


you are here ► 
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which was it? 



RciSe 

Liitiort 


You read two pieces of text until you felt you’d gotten the gist of what each article contained. 
Which one did you stop reading first? Let’s take a look at the first two sentences of each 
opening paragraph: 

Text block o was written with the inverted pyramid. 


Avalon Hill, now owned by Hasbro and operating as a 
division of Wizards of the Coast, was a tabletop game 
company specializing in war games and strategic 
board games. They were not only responsible 
for pioneering many of the key concepts of 
modern tabletop wargaming-such as 
the hex grid and zones of control— 
they were also responsible for 
publishing some of the most 
recognizable titles in the 
board game industry 
such as Civilization, 

Axis and Allies, 

Runequest, 
and Dune. 




^ I 心 a lot about 
wha-t wc expe 匕七 i h 

^ ,s airtde -Pvom -the 
^ 七 -two scr\icucs. 



Warhammer, which is currently in its 7th edition, is played using player-selected armies of 
25 mm - 28 mm plastic or metal miniatures. The game rules (as well as storyworld material) 
are published and released in a series of books (some of which are core to gameplay, while 
some of which are supplementary). 


pastid rhihia-tuircs aood 

opCh,h 9 Ho ihvcAcd 

p 卜 id 
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Copy Magnets 


Organize these chunks of text from the Editor-in-chiefs copy 
using the inverted pyramid. Remember to keep the most 
important information at the top. 



being accused of misusing corporate funds and accumulating lar.e dettfn W 

the company. However, unbeknownst to Gygax, Kevin and Brial Blunf^ 131 ⑺咖 1 0f 

Initially, TSR Hobbies, Inc. Dungeons & Dragons brand was 

and abroad. Unfortunately, despite : 以 — Blumes began to greatly overextend 
becoming more popular and ^iddy g domains suc h as board games and toys, but 

the company’s reach. They not only m f 咖 Perhaps the best evidence of this was 
they began to diversify in ^ a needlepoint business owned by 

the unapproved acquisition of 

Dne of the Blume s rela tives... J company was - -- 

community as new products were released bv otT mgmentatlon of tabletop RPG 

t0 C 7 Pete in the ™ gent collectible card ^^ 職 ， in 如 ⑽ 

products ^ such 


In 1973, Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don Kaye founded 

Tactical'Studies Rules in order to publish the rules for Cavaliers and Roundheads, a miniature war 
game based in the English Civil War. While Cavaliers and Roundheads was the initial focus of 
Tactical Studies Rules, Gygax and Kaye also wished to publish the rules for... 


vou 


are here 
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content in the inverted pyramid 



Copy Magnets Solution 

You organized chunks of copy from the Editor-in-Chief using 
the inverted pyramid. How do you think users would react to 
the text as it is here? 


In 1973, Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don Kaye founded 
Tactical'Studies Rules in order to publish the rules for Cavaliers and Roundheads, a miniature war 
game based in the English Civil War. While Cavaliers and Roundheads was the initial focus of 
Tactical Studies Rules, Gygax and Kaye also wished to publish the rules for... 


but 


— lly ,TS R Ho bbl e S ,Inc. : 

and abroad. Unfortunately, despite 二 d ，— Blumes began to greatly overexten 

becoming more popular and wid y g domains such as board games and toys ， 一 

the company, reach. They not the best evidence of th, was 

they began to diversify m ld Needlewomen ，a needlepoint business owned by 

the unapproved acquisition of ^reentieia 

one of the Blume’s relatives 


being accused of misusing corporate funds and accumulating la 二 tt f 孓 

the company. However, unbeknownst to Gygax, Kevin and BriaTfilu ⑺咖 1 of 

t0 in the emerg ent collectible card ^ ^ ^ 職，咖咖 

二 —chas Dragon Dice and Spellfl^iZ^ 
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Compress your copy 


One of the easiest things you can do to make text more 
web-friendly is remove unnecessary content. If your text’s clear and 
concise, your users will spend less time reading and will be happier. 

So what’s the best way to write less but still keep the relevant 
content in your article? It’s a matter of careful editing. Get to the 
point quickly with short words and phrases and concise two to three 
sentence paragraphs. 


why, 

but you just saved 
stv-aihed eyes^ 


Reduce adverbs (words that change other words and often end in 
-ly, like “ a big moose”）and replace passive phrases with active 
phrases (“ the brain wao hydrated by eight glasses of water a r4ay” 
vs. “hydrate your brain with eight glasses of water daily”). You’d be 
surprised how many words don’t have to be included in copy for it 
to make sense. 

When you’re done, re-read your copy. If you can’t work out what it 
says, what hope do your users have of understanding it? 


Take the article that the Editor-in-Chief gave you and edit 
it down so it’s shorter. 


^|terpen your red pen 


T\\t -full bo 
td\i is available a*t 
y/y/y/. iicad-fiv-s-tlabs. 
^om/books/K-fy/d/ 


%\iz fLipster IntdlmentEr I 

DAI LY H IP£TER NEWS * EVEMTE _ 

Website copy I 

In 1973, Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don 
Kaye founded Tactical Studies Rules in order to publish the rules for Cavaliers and 
Roundheads, a miniature war game based in the English Civil War. While Cavaliers 
and Roundheads was the initial focus of Tactical Studies Rules, Gygax and Kaye also 
wished to publish the rules for Dungeons & Dragons, a fantasy miniature role playing 
game developed by Gygax whose rules were based on Chainmail, a medieval miniature 
game developped by Gygax and Jeff Perren in 1971. As Cavaliers and Roundheads 
began generating revenue for Tactical Studies Rules, the partnership was expanded to 
include Dave Arneson and Brian Blume. While Dave Arneson was brought into the 
partenership as a game designer, and left shortly thereafter, Brian Blume entered as 
a funder. Blume believed that Cavaliers and Roundheads was not generating enough 
revenue, and encouraged Gygax and Kaye to focus their efforts on releasing Dungeons 

&Dragons ' . . . A I 

There is considerable debate as to the contributions that Dave Arneson made to the 
initial development of Dungeons & Dragons. While Arneson has labeled himself “The 
Father of Role-playing,” and has said that he was responsible for writing the 
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editors love red pens 


f^iharpen your red pen 
^ Solution 

^ooittuori 一 


You edited the article that the Editor-in-Chief gave you so it’s 
shorter. What else will you need to do? 

Dok /七 

all 


before 
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writing for the web 



Dumb Quest! 


ons 


So if people don’t like to read on the Web, 
what’s the point in editing my text down? Won’t 
users just go ahead and print it to read offline? 

Sure, some users print pages for future 
reference, but think about how you use the Web. 
When did you last print a page to read later? Most 
people surfing the Net want quick answers, so it pays 
to give them text that’s quick to read. 

Wait. Won’t that mean they spend less time 
on my site, not more? 

Actually, no. Sure, the occasional browser who 
was looking for something specific will read the page 
then head on out never to be seen again, but the 
majority of users are hooked by good content. Once 
you’ve got them hooked, you can feed them more 
content with carefully placed links to related articles. 

So this inverted pyramid thing... How do I 
work out what’s most important about my content 
so I can present that to users after a general 
introduction? 

There are no hard and fast rules. If it's content 
you wrote, you should have a good idea of the two or 
three main points you want readers to take away. If 
it’s content you received from someone else, read it 
through and see if you can find the main takeaways. 


So if my content’s ordered by importance, 
how do I know when to stop? 

If some bit of content's so far down the 
importance line that you're not sure whether to include 
it, that may be enough of a hint to get rid of the text. 

Of course, if you’re still not sure, be the user. Imagine 
you're reading the text. Does that last little bit of detail 
help you understand the main gist of the text? If it 
doesn't, you know what to do: Dump it! 

So how much content should I have 
removed when I edited my text? You made some 
changes I didn’t even think of... 

There’s no perfect answer to this, but if you 
follow the rules to create 2-3 sentence paragraphs and 
remove unnecessary words, you'll find your text will 
be significantly shorter. Shoot for around 80% of your 
original text’s length. 

Practice will help here, but you can learn a lot by 
looking at other sites like yours to compare their 
writing style. Chances are, if you’re following the rules, 
you're already seeing places where they could slim 
down their content a little! 


Tlie invertect pyramict 
and editing are useful 
tools，tut so is re-reactingf. 
Once you’re done ectitingf ， 
take anotker pass tkrougk 
and see il you can skave 
oil just a little tit more. 


you are here ► 
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test drive 




Tqst DriVQ 


Update your XHTML so that it contains only your edited text. Let’s 
test it out in the browser... are we getting any closer? 
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Thafs much better, but it still 
looks like way too much in my 
browser. All that text on screens 
a little overwhelming. 


TS-K haiil umiu mkp^. C-iio lhx. L 
■ uph^iypes muL rm% e hjink^ (InL 

jiHiu 酏 inn pcis^l inli! Ilu: iviilm i^l' 
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How would you fix this? 

You’re a web user. What do other 
sites do to break up content and 
make it manageable? 
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writing for the web 



So we still need to break the text down some, huh? How 
about using a list to make the content more scannable? 


Jim: How would that work? Doesn’t a list just add a bunch of different-sized 
chunks of text for user’s eyes to scan? 

Frank: Lists break up large blocks of text into smaller chunks that are easier 
for the user to read. And they give the user’s eyes something to lock onto when 
they scan the page. Let me show you how it works. I’ll write out some text then 
show you how it can be broken down into a list. 

Lists do a great job of breakiNg up text aNc| r^akiNg the coM*teN 士 om 
your page wore scaMMable. Lists caN break up paragraphs that seeM 十。 
have lots of list-type ite^s in then, aNc| lists caN eveN break larger 
paragraphs iN*to smaller chuNks, esseNiially buildiNg a list of paragraphs. 
Lists caN used iN 士 he r^aiN coN+eM 十 body ， Sidebars, NavigaiioN, foms ， 

aNc| pretty kucH everywhere else on your page. 

Jim: That’s not bad, actually. Looks like the first paragraph of an article about 
lists, using the inverted pyramid to get all the important points up top. 

Frank: Ha ha. Yes, well, you know, I’ve been paying attention. So anyway, like 
you say, this text isn’t bad. But it could be much quicker to scan and read — 

Jim: — in a list? 

Frank: You betcha. Just like this: 

Use a list wheN ： 

You Need to wake your 士 ex 十 scaNNabU 
Paragraphs or sgm 十 eMces have cc listable cc ele^GNis 
■ Large blocks of text caN bi"°k^N in+o 1 or 2 seN*teMce chuNks 

七以七 •…+ 、 Jim: Neat. Those bullets summarize three sentences of your text into just three 

bullet points. But what about the rest of the text? 


■ 


■ 


a\\owS readers 七。一 V 
g\aNce a*t 加 text aNd 
extract \N?orrAa*t\oM- 


Frank: [writing] 

Lists caN used in differeNi ways all over your si 士 e. Try W\qia in ： 

■ Your naiN con 士 eN 十 

» Sidebars 

■ NavigafioN aNd Headers 
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pyramids and lists online 



Visit the following sites and annotate these screenshots. Which of these sites use the 
inverted pyramid? Why do you think any of the sites wouldn’t use the inverted pyramid? 
Do any of the sites use lists and bullets? Why or Why not? 
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writing for the web 
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which site does what? 







ExendSe 

OLutiOH 


Which of these sites use the inverted pyramid? Why do you think any of the sites 
wouldn’t use the inverted pyramid? Do any of the sites use bullets? Why or Why not? 




sIashdot.org 




avc 


davk yrtt 於 badk^vou^a 


a»sfla7cd •，“ 


E ■ 




newsvine.con/i 


Ncwsv'mc docs^^i use lists as its md'rn 
layout -tool bui does a gvea-t job o( 
pi 把 m3 -them \y\ sidebav-s and c^iv-a 
匕 cm 七 errt. Noiidc ihc bullets m eadh 
o( ihc ihv-cc 匕 oluwms. 




5^? 



pi 於 cvcv-yo^c^s -favov-itc -tc^h^olojy ajycgaW ； 
is O^e 少扣七 list The mos-t ^ctCt^ most pofulav 
w dijjs w a^*b as bullets h> jv-ab youv eye, a^d they 
^v-ovide a v\\tt dli^kable Imk *to -the s*tov-y. 


d — —— -- 

■一 L _ 」 




digg.cow 


These a\rc ou\r a^sy/C\rs. Youv-s may be a li-t-tlc 
di*WWe>rrt, bu-t thed ihc siics again i*f youv 
a^^o-ta-tior>s a^rc a LOT d\((trcv\i -tha^ ou\rs. 


㈣ 


fh-^HP L_ I y 




tecb.origiwalsigwal.com 
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writing for the web 


( >en your pencil 



Take this paragraph from the Editor-in-chiefs copy you already 
edited and make it more readable by turning it into a list. 

Hint: You can use a sentence or two to explain what the list is. 


The departure of Gygax from TSR irreparably changed the face of the company. 
TSR successfully expanded into areas such as magazines, paperback fiction, and 
comic books. In addition, the company released popular new role-playing settings 
including Dragonlance, Ravenloft, Forgotten Realms, and Greyhawk, all of which 
have had an enduring impact on the tabletop roleplaying landscape. 
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list your good points 1, 2, 3 

parpen your pencil 

Solution 


You made this edited paragraph more readable by turning it into 
a list. Leaving a sentence or two to explain what the list is helps 
give the user context. 


The departure of Gygax from TSR irreparably changed the face of the company. 
TSR successfully expanded into areas such as magazines, paperback fiction, and 
comic books. In addition, the company released popular new role-playing settings 
including Dragonlance, Ravenloft, Forgotten Realms, and Greyhawk, all of which 
have had an enduring impact on the tabletop roleplaying landscape. 



TWis co^i already 
*mvcv-tcd pyramid (mos*b 

kst), W 七 broken 

dovm -fu\rt^c\r m*to 


The -from TSR -fade o-f Corn^^r!^- 

广 ^^ TSR suddcss-fully e%pahded *m*to areas sudh as ： 


Hoi\c,c how a little 
"twt bc-Pov-c 

list gives the list 
some 匕 。 htext 



參 Ma^az-ihcs 
@ Paperback -fid*tioh 
參 Comid books 


Thy lists items 4 十 < 

so they doh-t heed puh^uatioh, 
b 許 yyohtt that -the -Pivsi wovd 
a+teir bullet is ^piializ^d. 


|r\ addition, *thc dompahy released popular hCw role-playm^ srttm^s, mdudir^: 


@ Dva^or\Uhdc 
@ For gotten Realms 


Tk Co^i WC used *to ext^it 
_ lists already listed a number o\ 
i-tcms, so \i was -fov, ^ lists. 


All -these Kavc had ^y\ chdurmg ir^pad-t ov\ *the -tablc-bop role-play'mg la^ds^ape- 

The last SChich^C 

^ded a small edit 

how that it -follows 
a list. 


Scannable web copy 


has content ordered by the inverted pyramid 


has been edited so it’s shorter 


breaks down content even more with lists 
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writing for the web 


Add lists to your XHTML 

Go ahead and edit the rest of your text to add lists where appropriate. 
When you’re done, alter your XHTML so that it uses lists, too. You 
can use unordered and ordered lists to give you bulleted or numbered 
list items: 

Uwordercd list 


<p>My favorite Seinfeld episodes</p> 
<ul> 

<li>The Chinese Restaurant</li> 
<li>The Pez Dispenser</li> 
<li>The Yada Yada</li> 

<li>The Junior Mint</li> 

<li>The Big Salad</li> 

<li>The Fuscilli Jerry</li> 
<li>The Rye</li> 

<li>The Merv Griffin Show</li> 
</ul> 



Ordered list 



<p>Top 10 reasons to move to Chicago</p> 

<ol> 

<li>Lake Michigan</li> 

<li>The n Chicago-stlye" hot dog</li> 

<li>The ，， El"</li> 

<li>Millenium Park</li> 

<li>Wrigley Field (even if you don't like the 
<li>The Bean</li> 

<li>The Sears Tower</li> 

<li>Really Deep-dish Pizza</li> 

<li>The Midwest accent</li> 
<li>intelligentsia Coffee</li> 

</ol> 
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how^ it looking 




Tqst DriVQ 


So you’ve applied the inverted pyramid to your article, edited it 
some, and now you’ve added lists. How’s it looking? 


ftcircs ou\r XWTML wrth lists. 

CKcdk ou*t -PoV" youv*scl-(* 

www.hcad-Piv-stlabs^om/books/h-fwd/ 
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.jt -1 Aw \ .n ■SLTi.kAj HiiiCilk ,a iiS |.ia f r^nu^ "f.iTW k 1 T^H 9uf p-nmkfu il I I3 jli lins^aw Wml Hm Hlnii I1a p biiu.' a "i .m 
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: Cmi di 


rd Kir. Mhfrdi iri pn 
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T a IVnruU' y f S K t r^rto E 
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iHKkiHd KCKMdMBf iHpeMl ■ dK |AkJ¥HI^ 
Ekw$ iU Jr^irrci, Husli siun^d tv n4c nf L 
Wii^izi d kid iKiil.4 boJ 

Linrd|Jry -ujLr ■ -I is^ih b ， i!l 

trir j nnk tuir^mvi ljJIciJ \r» 

I&8 ； n! £i>xai, Qi 


A dc-Pihitioh list, <dl>, lists 
wo\rds ahd thciy dc^ihitiohS, 
bui we used it hcv-c -fov- the 
list <^P the -fouv- hew ^ompahies 
ahd thci\r \rcspohsibili-tics. 


ife^TBf^ al 


L>^E'[ Eirp%T 相 
y 1 dif^iTW^ DV411 


IrifWri^l, fift 
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writing for the web 


cv ⑽ 

Headings make your text Vmorc scannable 

So you’ve used lists to break down some paragraphs and sentences 
into bullets, but what else can you do to help users scan your content? 
Headings are a great way to make blocks of text more scannable. 

Headings reduce large blocks of text into more manageable chunks, 
and they announce exactly what that chunk of text is about — which 
lets your users decide whether they want to invest their time in 
reading that bit of text. 


Here’s the home page of the New Yorker, www. newyorker. com. 
Circle all the headings and lists. Take your time... try not to miss anything. 
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Did you find a//the headings and lists? 
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writing for the web 



Now that you’ve got a good idea why headings are important (and what makes 
a good heading), it’s time to try headings out on your own. 

Write a short heading for each of the blocks of text below. Remember to create 
headings that are straight to the point and scannable. 


Acoustic guitars are used in a variety of different genres 
across the globe. Because of the long history of the acoustic 
guitar, there are many different kinds; some kinds are rarely 
considered guitars, such as the ukulele, which was based on 
the four-stringed braginho or cavaquinhos from Portugal. 


The Protestant movement may have commenced earlier, 
but the publication of Ninety-Five Theses by Martin Luther 
in 1517 spurred on the revolution within the Church. 

Luther attacked the Church’s theology, which, he believed, 
misrepresented the Bible and placed too much authority in 
the hands of the clergy, and he wished to reform the Church. 
After being excommunicated, Luther published many books 
on Reform. Luther’s works were most influential in Germany 
and Scandinavia. 


The surface of Mars is a lot like a desert on Earth; it is very 
dry and dusty, but it is also very cold. There are a lot of 
loose rocks and dunes of fine sand. Crater impacts mark the 
surface, but these are not as common as on the Moon. One 
of the craters is the huge Hellas Planitia. It is about half the 
size of the continental United States. The southern half of 
the planet has more craters than in the north. The south is 
also higher in elevation. 
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scannable headings 




RciSe 

iuiloH 


You wrote headings that are straight to the point and scannable for the blocks 
of text. Is this enough to give the copy that newspaper feel that the Hipster 
Intelligencer’s staff wanted? 

丁 ^ "tcx-t ish t jus-t dbou 七 cl^ous-ti^ gui-tolv-s, 
^ ^ "the di^c\rch-t jyfes o( gui-tav- -that 

Mo^sht guitar Types ^ havc CVolvcd 扣 ⑽ d ^ 赠 Id. 


Acoustic guitars are used in a variety of different genres 
across the globe. Because of the long history of the acoustic 
guitar, there are many different kinds; some kinds are rarely 
considered guitars, such as the ukulele, which was based on 
the four-stringed braginho or cavaquinhos from Portugal. 


A1a\rtm Luther 


This is abou-t Lu-tiiCV ajad ilis vole m i\\t 
?roitsiay\i movement so i-f you hvc a iicadm^ 
七 ha 七 -foduscs oy\ *t^aVs pvobably 


The Protestant movement may have commenced earlier, 
but the publication of Ninety-Five Theses by Martin Luther 
in 1517 spurred on the revolution within the Church. 

Luther attacked the Church’s theology, which, he believed, 
misrepresented the Bible and placed too much authority in 
the hands of the clergy, and he wished to reform the Church. 
After being excommunicated, Luther published many books 
on Reform. Luther’s works were most influential in Germany 
and Scandinavia. 


The o-f Mars 



/up, this Ohcs dc-Pihi-tcly about 
clcmch-ts Mavs. 
Sometimes headings avc ho-bvaihevs. 


The surface of Mars is a lot like a desert on Earth; it is very 
dry and dusty, but it is also very cold. There are a lot of 
loose rocks and dunes of fine sand. Crater impacts mark the 
surface, but these are not as common as on the Moon. One 
of the craters is the huge Hellas Planitia. It is about half the 
size of the continental United States. The southern half of 
the planet has more craters than in the north. The south is 
also higher in elevation. 
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writing for the web 



Dumb Quest! 


ons 


Doesn’t adding a bunch more small items 
on the page make it longer? Won’t that strain my 
users’ eyes more than a shorter page? 


What about the definition list in your 
solution, what made you decide to use that where 
you did? 


No. In fact, lists help your users scan the page 
faster and take in more information, more easily. Lists 
break down sentences and paragraphs that contain a 
lot of information into easy-to-read chunks. Lists might 
add a little to the length of a page, but your users will 
be happy to scroll down if the content's relevant to 
them. And since you've already edited your text so it 
follows the inverted pyramid structure, they’ll know 
right away if the page is relevant to them. 

When should I use lists? You had a couple 
I didn't have, and I added some in that you didn’t. 
What gives? 

Lists are great for breaking long paragraphs 
down into two or three more manageable chunks. If 
you broke down more paragraphs than we did, that’s 
fine, but be careful not to overuse lists. It's good to try 
and keep a balance between short, focused sentences 
and lists. Both help keep your users interested. 


Definition lists aren't just for definitions! Sure you 
can use them to give a word or phrase and provide a 
definition, but we chose to use the <dl> to list each 
of the four new companies and their responsibilities. 

What if I didn’t catch all the lists and 
headings in the New Yorker exercise? 

Hey, don't be too hard on yourself! Seriously, 
there are a lot of headings and lists on that page. If 
you didn’t catch them all, it’s no big deal. Just keep 
practicing, and soon you’ll be writing web copy like a 
pro—and recognizing the same tricks at work on other 
people’s sites, too. 


Keep practicing. Tke more 
wet copy you write and 
edit, tke tetter you’ll l>e 
at slimming text down 
anct making it scannalile. 
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write scannable headings 



jCph 苢 ExGRdSe 


Use your newfound expertise to write headings for the first four sections of your copy. 


In 1973, Gary Gygax and Don Kaye founded Tactical Studies Rules (TSR) to publish the 
rules for Cavaliers and Roundheads, a game based in the English Civil War. Cavaliers and 
Roundheads was the initial focus of TSR, but Gygax and Kaye also wished to publish the 
rules for Dungeons & Dragons, a role playing game developed by Gygax. As Cavaliers and 
Roundheads began generating revenue for TSR, the partnership was expanded to include 
Dave Arneson and Brian Blume. Dave was brought into the partnership as a game designer, 
but soon left, while Brian Blume entered as a funder. Blume believed that Cavaliers and 
Roundheads was not generating enough revenue and encouraged Gygax and Kaye to focus 
their efforts on releasing Dungeons & Dragons. 


In 1975 Don Kaye died of a stroke. The immediate result was that Blume and Gygax 
dissolved TSR and founded a new company named TSR Hobbies, Inc. The board of 
directors for TSR Hobbies, Inc. consisted of Brian Blume, Gygax, and Kevin Blume. 

Roles were assigned as follows: 

• Brian was President of Creative Affairs 

• Kevin was President of Operations 

• Gygax was the new company’s CEO and President 

Unlike the equal partnership of TSR, brothers Brian and Kevin owned a majority of the 
new company’s shares. 


TSR Hobbies, Inc. experienced phenomenal success in both the United States and abroad. 

But the Blumes began to overextend the company’s reach. They moved into domains such as 
board games and toys, and began to diversify into unrelated areas. The best evidence of this 
was the unapproved acquisition of Greenfield Needlewomen, a needlepoint business owned 
by one of the Blumes’ relatives. Also, Kevin Blume had printed millions of copies of the 
previously successful multi-path Dungeons & Dragons adventure books, which couldn’t be sold. 
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In an effort to mitigate the mounting financial problems, TSR Hobbies, Inc. was restructured 
into four companies that focussed on different areas: 

TSR, Inc. 

Continued to manufacture the company’s core Dungeons & Dragons role playing products 
TSR Ventures 

Focused on the production of plastics and toys in Asia 

TSR International 
Established to manage: 

• Overseas business 

• Distribution, sales and licensing 

• Production 

TSR Entertainment 

Responsible for leveraging TSR s IP in other entertainment markets, such as movie and 
television 

Unfortunately, TSR Entertainment’s only success was the short lived Dungeons & Dragons 
cartoon. Gygax claimed the separate corporations were Blume’s attempt at keeping foreign 
income away from US taxation. 


Now write the headings for the rest of your article, and when you’re done, change 
your XHTML file to match. 

When you’ve done that, download the content for the center <div> and sidebar. 

www.headfirstlabs.com/books/hfwd/chapter7 / center.html 
www.headfirstlabs.com/books/hfwd/chapter7/sidebar.html 

and add headings and lists for those, too. 
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let’s head on out 



ExeRaSe 

LutlOH 


You should now have headings for all of your copy including the center and sidebar <div>s. 
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乃鈍’”⑽ a \oio( code. 

Po\Nv\\oad the -full vevsioh: 
'槪)呼片舰 “ om / b ooks/ “ wd/ 


<dl> 

<dt><a href: 


’>New Candy Store Opens</a></dt> 


<dd>Sweet! A new candy store. Now you can satisfy those sugar 
cravings.</dd> 

<dt><a href = flff >Webville Diner Robbed</a></hl> 

<dd>The thieves appeared to be a loving couple until they jumped up on 
the table, that is.</dd> 

<dt><a href= nn >Job Opportunity</a></dt> 

<dd>I.T. Support required by parents in and around Webville, no need to 
apply, simply call home!</dd> 

<dt><a href= flfl >Starbuzz, new range</a></dt> 

<dd>In Business News, Starbuzz Coffee has announced a new range of fruit 
smoothies to be sold in store.</dd> 

<dt><a href= fln >Head First Books a "Great Read lf </a></dt> 

<dd>She 1 s back! As a movie tie-in. Lassie has been reading the <i>Head 
First</i> series.</dd> 

<dt><a href = flfl >Concrete Cows found</a></dt> 

<dd>Rich oil magnate 1 s prized concrete cows had simply been moooved out 
of their paddock.</p> 

<p>Copyright &copy; 2009</p> 

</div> 

</div> 

</div> 

</body> 

</html> 
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Tqst DriVQ 


How are those headings and lists looking in the browser? 
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I love what youve done 
with the text, But the site 
doesn’t feel 、、 newspapery 〃 enough. 
Even though were changing the 
format a little, I still want to keep 
it looking like the printed version. 

Here's a copy of the paper in print. 
What can you do to make the two 
look more alike? 
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■參 


Newspapers have a distinct typographic look and feel. 
Go pick up your local paper and think about how the 
type looks. Is it serif or sans-serif? Are the lines spaced 
far apart or close together? What about the look of the 
newspaper’s typography makes it look “newspapery ”？ 
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emphasis through fonts 


Mix fonts to emphasize headings 
and other text 


Using a different font for your site can dramatically change the 
feel and emotion of the design. On top of that, different fonts can 
make your text more readable and make life easier for your users. 
There are two distinct categories of fonts for the Web: serif and 
sans-serif. 


A mix of serif and sans-serif fonts can add a nice touch to pages 
and help separate content from headings. It also allows you to 
render serif fonts at a larger size and keep the body content in a 
sans-serif that can be safely displayed in a smaller size. 
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Gee} Bits 

Serif fonts look like 
Times New Roman 


and are defined by the 
small projections — or "serifs” 一 that 
extend off the main stroke of the 
character. 


Sans-serif means "without (sans) 
serif” and is composed of font 
families like Helvetica and Arial. 
Sans-serif fonts are easier to read on 
screen because the relatively low 
resolution of computer monitors 
makes serif fonts look blurry, 
especially at smaller sizes. 

This doesn’t mean you can’t use serif 
fonts on the Web; they just need to 
be used properly and rendered large 
enough so that they can be easily 
read by your users. 
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Hmm. Thafs not exactly what I'd call 
''subtle." CouldiVt we introduce some variation 
by making the headings different sizes? 


We could, but be careful. Do you 
mean text size or heading level? 
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The level , wot the slzg, of a heading 
cowvcys importance 

HTML comes out of the box with six different header levels: <hl> through <h6>. 
With no stylesheet (just the naked markup), most browsers will render <hl> in the 
largest text and <h6> in the smallest. 

Remember, HTML’s a markup language and isn’t intended to convey style 
information. The different heading levels are used to signify importance in your 
content. A level one heading <hl> is the most important heading, <h2> is the 
next-most important, and so on. 

When you’re marking up your sites, remember to make main headings <hl> or 
<h2> and make other sub-headings a lower heading level. This will ensure that 
the site is semantically correct and search engines are interpreting your content 
correctly. (Remember, the bots can’t actually see your design.) 



he ImufIa il 


’L ： Q'- 4 .] i + f 





Bunding Levd 2 


Heading Level 3 

Heading Level 4 


Wsihg CSS, <h^> 

■^9 ^ display \a\r^c 
thdh dh <h/>. Always 
iremembev- that 


"the Kodih0 humbev* 
is 5 -fuh^-tioh of 
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Heading Level 5 

Heading Level 6 






Just because you can style the lower-level headings in 
larger fonts with CSS, does that mean you should? 
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serif vs sans-serif 


Fireside Chats 

華搴 


Tonight’s talk： Serif and Sans-serif discuss readability and 
who makes the better web font. 


Serif: 


I’ve been around a lot longer than you, Sans-serif. I’ve 
worked with newspapers and books for years, so I 
can’t understand why I wouldn’t be a perfect fit for the 


Web... 


Like you’re so readable at small sizes. Plus, the user 
can resize the text in their browser. Everyone knows 
that. And what do you mean / look blurry on a computer 
monitor. Most folks have those fancy screens anyway. 


That was a low blow. I thought this was supposed to 
be a civilized conversation? Gan you back any of that 
up with proof, big guy? 


Oh, uh, okay, point taken. But you have to admit 
that there are some nice-looking serif fonts, including 
Georgia, which was made specifically for the Web. 


Sans-serif: 


Listen, just because you’re easier to read in a book or 
magazine, doesn’t mean you’re better for the Web. All 
those little “serifs，” as you call them, make you look 
blurry on screen. And don’t even get me started on 
how you look at small font sizes. Not. Even. Legible. 


Oh man. First of all, not everyone knows how to resize 
text in their browser, and there’s a huge difference 
between screen and print resolution. Those fancy 
flat screen monitors still don’t even come close to 
matching the resolution of text printed on a page. 

Ever try to read a whole book on your fancy computer 
monitor? The eye strain would be so bad, you’d never 
finish. Why make that worse with a serif font? 


www.webstyleguide.com/type/face.html 
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Serif: Sans-serif: 

Even I’m a fan of Georgia, especially for headings. But 
you’re everywhere these days. 

It is kind of nice being the default browser font. I 
couldn’t ask for better publicity right out of the gate. 

But you know ， Helvetica’s out there spreading the 
good word on sans-serif, and Verdana’s made some 
noise on the Web lately. 


You’re okay when you sit down face-to-face. You 
could do wonders for my pages if I use you in the right 
place... 



Okay, you’re on to the final stretch. Here’s what’s left to do: 


Change up your XHTML to use 

the different heading levels. ^ - Vo^i v-dy oh your CSS 

■to show what level 

Create CSS styles for the heading is. Be 

different heading levels 

Use CSS to style the main 
content text. 


Do you like how your lists look 
out of the box? If not, use CSS! 


Keep this page open and tick off each to-do as you complete it. 
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what did you build? 


美 : 


ExesciSe 
SotuiloH 


You changed up your XHTML and added CSS styles for your headings, body text, 
and maybe even lists, but how did you do? Why not tell us! 
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Your Web design Toolbox 

You’ve got Chapter 7 under 
your belt, and you now know 
the ins and outs of writing good 
web content. You should be able to 
write organized，scannable web text. 

But there’s still more... keep reading! 





BULLET POINTS 


■ People read text off of a screen 15% 
slower than off a printed page. 


■ 


■ 


■ 


The low resolution of monitors 
(compared to a printed page) often 
results in eye straining-making it 
uncomfortable to read text off a screen. 

On the Web, people don’t read text 
like they do on a printed page. Instead, 
they scan it, looking for keywords, 
sentences, and paragraphs that are 
meaningful to them. 

Write your text like an inverted pyramid 
—with a general summary at the 
beginning and detail after. The idea 
is that users can stop reading at any 
time and still be confident in the fact 
that they’ve already gotten the most 
important pieces of information. 


■ Always write at least 15% less text for 
a website than you would for a print 
document. 


■ 


■ 


Use lists to break up large blocks of text 
and give the user’s eye something to 
latch onto when they are scanning your 
page. 

Headers make text more scannable. 

Not only do they break up large blocks 
of text, but they also tell the user what 
the paragraph is about. 

■ Sans-serif fonts are easier to read on 
a screen than serif fonts, especially at 
smaller font sizes. 
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8 accessibility 




Inaccessibility Kills ♦ 



Who’s missing out on experiencing your website right now? 

You may have a beautiful, well-laid out, easily navigable site... but that doesn’t mean 
everyone’s enjoying it. Whether it’s someone who’s visually-impaired or just a user who 
has trouble distinguishing blues from greens, your site must be accessible. Otherwise, 
youYe losing users and hurting your business. But don’t worry: accessibility isn } t 
difficult! By planning the order of your markup, using ALT attributes and LONGDESC 
tags, and thinking about color, you’ll widen your audience immediately. Along the way, 
you may even get WCAG certified. What’s that? Turn the page, and find out... 


this is a new chapter 
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introducing audfo-2-go 


Audio - inaccessible accessibility 

Audio-2-Go is a site that sells audio books for the blind and visually 
impaired. But the owner’s got a problem: his site doesn’t work for 
those who can’t see! It turns out that the firm who did his site didn’t 
know anything about accessibility, and now he’s losing customers 
faster than you can say, “But I can’t see what your site looks like!” 

It’s up to you to take Audio-2-Go to its audience: those who depend 
on accessibility every day. 
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accessibility 


Accessibility means making your 
site work for EVERYONE 

So what exactly is accessibility? When a website can’t be used by 
someone with a disability, the site’s inaccessible. When your site can 
be used by someone with a disability, then your site is accessible. 


So, basically, accessibility is both the process and the techniques 
used to create a site that can be used by someone with a disability. 
Web accessibility usually deals with visual, auditory, physical, speech, 
cognitive, and neurological disabilities. And on the Web, accessibility 
also includes designing for older individuals whose abilities are 
changing due to age. 


Accessibility is 
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understanding screen readers 


How does your site REAP? 


When you think about disabilities, one of the first things you probably think 
about is the visually impaired or the blind. Those disabilities have a huge effect 
on how your site is perceived. All your visuals become more or less irrelevant... in 
how they look, but not in how they sound. 

The majority of people who are blind use a screen reader to browse the Web. 

A screen reader is a piece of software that reads the text of a website out loud. 
While there are quite a few screen readers on the market, the most popular is 
JAWS (http:/ / www.freedomscientific.com/jaws-hq.asp), a Windows-only product. 
Mac users often use VoiceOver, a screen reader built right into the Mac OS X 
operating system (http:/ / www.apple.com/macosx/features/voiceover/). 


Regardless of the product, a screen reader literally reads your page out loud. 
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° h d based oh the 

rkup. 


HTML 


) 






^ _ 



.. ， ^ 


Link ： Google Search 
book cover dot jpeg. 


Heading level 2: 
Listen. All of our 
books are narrated by 
the author... 


Stv-ccyv v-cadcvs 

七 ell Y OVA ▲ 七 
i\\t 

level is i*b 

v-cads *bc%*b- 


Sign Up 

fVKjJ - hinuml w ih AikOip-^-^jci urrii K^in 
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f BfMlI iddreMi E^ili RCt StAFtiHt 
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_ wamhfei« yoQf •刪 um youm 

'ihiEji^ipiJili^ 1 Ainliu liEr i 
h2hrr 1A H li Li:vT ： |M^ikl± jik&b pinj.iiT- t 


Featured Books 


Liilen 

Ail nr'bgEjlup 


nfi «n/ \inrn, 


ciilvd bnr |J*># auLlur i 
Jl- 

■nfew 


•Ul 明 ov DgCiLf m 

^oki 1 Mnri, 

dcdnilJoiii iricia* brmuio pral 

■l&lI mrilcuk>iuJv pc«i^ 

HfeEtah ifh# hut ri^ilr^kin 

pf ii:d:p |s^lu W\ Lkc potwii 

qiuhly- 


Pg.Twnrdc<rlin liljfih- 
ci in pnolEifir^EafeJ it' 
la peri-ixredLuiDn. 
4 tlHt 


0 




tt 









L'mks 3 ir>d 
images av-c 
read as 

i^o"t 

so yea 七 (or 

*tKc disabled- 


nK^^niEid QAb 


ir«,i 
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accessibility 


^Sharpen your pencil 


You can’t begin to understand accessibility until you experience a website as someone who is 
blind or visually impaired does. Open up JAWS (they’ve got a great free demo) if you are on 
a Windows machine, or VoiceOver if you are on a Mac, and turn your screen reader loose on 
your favorite website. Oh... and before you start the reader, make sure you close your eyes. 


Now that you’ve got a bit of an idea about how the blind and visually impaired experience the 
Web, its time to see how Audio-2-Go's website measures up. Open up your screen reader 
and turn it loose on the Audio-2-Go website (http://www.headfirstlabs.com/books/hfwd/ 
audio2go/). Write down three things you learned about the site, and then what you think the 
overall site is about... based just on what you heard from the screen reader. 


Wkat is Audio - 2 - Go about? 



❺ 


❺ 


Wha 七 avq 减 
about 

overall si'tcT 



you are here ► 


279 
















computers are stupid 


A site's message should be clcar...to EVERYONE 

Audio-2-Go’s message isn’t so clear verbally, is it? The whole point of a website is 
to communicate something to your audience. That means your job is to make sure 
your content is just as clear to someone using a screen reader as it is to a sighted 
user. But when you “listen” to Audio-2-Go, a lot’s lost in translation. 

Here’s what a few visually impaired users thought about the Audio-2-Go site: 


*1 n n _ 


jC&l k^lii 


My reader started listing 
what sounded like image 
names, or maybe filenames. 
Aren’t there any books on 
this site? 


O 


o 




N^UE 


up 


Featured Books 


w ih Aiidlip-s 


IV^in 
iOMcl : 


0 


I had no idea where I was. 
I never even heard the 
name of the page... just 
some text and a bunch of 
weird sounding names. 


luml 

;biM>ki mmfditl 咖 All i 
dr Mi RCL itAFtedi 

\anmct coj^PlCuhw K^nlnit 


I 咖 ! im wu ac i 

Mill £Jes Kf me (E 
k iklt giriap pla^'m 
if I wcb r 

iny hjrw. 





iVi-thou-t youv 
hdp, a sdv-cc^ 
v-cadcv- will vead 
image i^dmes^ 
whidh is pirrtty 
do^-Pus'mj. 



Trtlcs, V^cad'my, 

and dcs^ftio^s 

av-c *f ov， 

vc3clcv*s. 


•"hcyiTif »RklKi bjr iJ^f : pulJur a 『 

J isn pi" wJr«rP| in 

drflitilloEi. feMiki- brmuiD pn3fe«»*J iwtiiii 
mnlciiJoiLiiv La pcri-^«du:idrL 

IbEhdri riAKfithi bi*t ifafeliWlriEI 

pf HDcliq |c^ki icywl3：|r^ _ L^c 3=iJi=at ^ssufe blf 



☆ 


侖 






The ojrdeir of youir m^kup …七七奶 
a I to seveevy … ahd 

Uh p vc a bi 3 oh ^ 0h ^ usi - 

visually impair visits. 


I heard a bunch of book names, and 
then some information about signing up. 
That was confusing... shouldn’t I hear 
that introduction text before hearing a 
bunch of book names? 


O 


o 
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accessibility 


Face it: computers are stupid! 

If you want to get a handle on screen readers and accessibility in general, you 
have to accept that computers are stupid! A computer or a piece of software 
can’t figure out that your image really represents a book, and that humans want 
to know the title of that book. So even though your page displays a book and an 
image that looks like a book, that’s not what a computer sees. 


f\ look ai a 

七 uve dcstvibc 

払 cy see m tlcav 
七 cvms. 




iM-thou-t a^y o-tkv 
all a domputcir sees is a -filehame 
extehsioh. 





How can you tell the computer what your image really is 
in a way you think a screen reader might understand? 
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alt attributes 


A computer will read your image's ALT text 

So what happens when a screen reader comes upon an image? Most of the time it 
simply reads the filename... which is absolutely no good to someone who is blind 
or visually impaired. Fortunately, img elements have an attribute that lets you 
provide your own description: the alt attribute. If a screen reader sees an image 
with an alt attribute, the reader reads the value of the alt attribute instead of the 
image name. Perfect, right? 

Well, only if your alt text is any good. 

Fortunately, good alt text is pretty easy to create. You want a short, descriptive, 
clear phrase. In other words, just succinctly describe the image: 


"The el't'tvibu'tc ^ocs 
inside "tKc <ir»\0> 
is used -Pov- shov-t 
dcs^vip-tiohs. alt is also 
<rc«\ui\rcd Oh all <i^0> 
tags ih o\rdcv- to pass 
XttTTWL valida-tioh. 


o 




/\ still sees 

c^a 呼 krtben. 


The domfu*tcv (ar\d 
veadev-) r>o>w see 七 he al 七 
七作七 dy>d vead ms-tcad 
of 七 lie -f ilename- 
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accessibility 



Create an <img> tag based on the information for each image and the alt text that was 
provided by the owner. 



Filename ： audio 2 go-logo .jpg 
PGSCriptiOH.* Audio-2-Go header logo 


m i\\t -Pull <i 呼 




Filename ： googlestory . j pg 

PGSCriptiOH.* The Google Story: An inside 
look into one of the World’s greatest 
technology startups. 



Filename: poppins. jpg 

PGSCriptiOH. a Mary Poppins by P.L. Travers 
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longer descriptions with longdesc 




Tesr DriVq 


Try out the Audio-2-Go site with a screen reader. 

Download the code for the Audio-2-Go site from the Head First Labs website. Open up 
index.html in your text editor and add the alt tags from the last page. Then fire up your 
screen reader and check out the Audio-2-Go site again. Any better? 



Oivac you ywiT cmi &iywrLo 

\>mi iikLu Ulm for ibc la^ura 

Ur oths 1 ! MPtH®EKpilibl t audio pLajrr. Aucfio 
Ga feln lradu jfaur ^runiaaa m jnli nn 
ckmn^Dd 扣 ur boo kill ury l^nic. 

Listen 

All d| i3>iu bocvlu a m rurroiEcd |iy llaa ai|£k^ 
p^afi^uJDQil teit^sc Adcjr, nEcc-rdriJ La 
dri^itifeiarfe jfcjdlii In profit >^0^1 

Esncl cctlid in -pmodudiigia. 

Hiodb & ^FGtn 1}ic i4wij 

of hi|.hKl pabnlf 11 


<img alt="The Google Story : An inside look 
into one of the World * s greatest technology 
startups" src="googlestory.jpg / > 



Mary Popp ins by 
PL Travers 


<img alt="Mary Poppins by PL Travers 
src= M googlestory.jpg /> 


IpUl KAl 
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accessibility 


O 


o 


I thought alt text was supposed to be short. Isn’t that 
description of the Google Story book a bit long? Ifs gonna 
take like 10 minutes just to read the home page. Just 
'cause people are visually disabled, doesn’t mean they ve 
got hours to sit around listening, right? 



EVERYONE^ time is valuable. 

Nobody wants to see or hear a page that’s filled with 
text that’s not relevant. Lengthy alt values are going 
to bog down your page and give information that’s 
not really needed. What we need is a way to provide 
additional information about an element, but let a 
viewer or listener choose whether they want to access 
that additional information. 

The longdesc attribute lets you do just that, 
longdesc gives screen readers an option to go to 
additional information about an element... like a 
longer description (longdesc... makes sense, right?): 




A sW 七 a 

dcs6v^t»ov\ <^f ^ “ay. 


<img alt= n cute orange kitten" 

longdesc="romulus .html" src= fT romulus . jpg" 


/> 


lo^dcsd mdi^atcs a page that has r,ovc detail... lots o-f 


o 


o 








Mosi 仏⑽ rtadtrs lc*t V° u c)nooSt ^ ^ 
七 he \o^dtsc pay <^f 
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adding longdesc to XHTML 


Convert your long ALT text to a LONftPESC 

Let’s convert the too-long alt text for the Google book to a longdesc... 
complete with a separate XHTML page. Here’s what you should do: 


❶ Add a LON 抑 ESC attribute to the 


Google book image tag. 

Kov/alt 

Aort and 仫 w ^ 


lo — 议 is added 

poihis {o a page ^ 


<img alt= M The Google Story" 1ongdesc="googlestory.html" 

src="googlestory.jpg" / > 


❻ Create aw HTML file called googlestory.html 
and add a longer description. 

T\\t -f ile you m 1。— 仪 

should be y\ov-wal )<HTML. 



/’ <!DOCTYPE html PUBLIC ， ▼- "W3C//DTD XHTML 1.0 Strict//EN M 

"http : // www. w3 . org/TR/xhtml 1/DTD/xhtml 1-strict • dtd"> 
<html xmlns= n http :// www.w3.org/1999/xhtml" 
xml : lang= n en" lang= M en"> 



<head> 

<title>The Google Story</title> 

<meta http-equiv= n Content-Type" 

content^"text/html; charset=utf-8" / > 

</head> 

<body> 

<p>The Google Story : An inside look into one of the 
World's greatest technology startups.</p> 

</body> 

</html> 


：iOh 


Add youv- lohj desdv-ip-tu 
bc-twcch -the pav-agvaph tags. 
V^u dould cvch add mov-e 
-P\rom the books 
badk toytt i-p you w^hted "fco. 


/Wake su\rc you piropcvly mavk up 
you\r dohtchi Remember this is 

still ahd ttTAIL -file... Lets keep 
things valid/- 


A loudest looks 

bUd... bu 七 tv^ese avc to 

be vedd wove see”. 



择 O O Hie C^wgl^ llary 1 



The Gcpogk Sioty: An liukjc look In 勘 (me of dK Worid^ pcautH ucbiwkigy samjps s 
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Tesr DriVq 


Give Audio-2-Go another screen-reading try. 

Add the longdesc attribute to the image for The Google Story and create the 
corresponding XHTML file to hold the actual description. Save your files and give 
Audio-2-Go’s main page one more run through with a screen reader. 








KWE 


Cmifti ^ksmt^aitA i^udiD-l^ki-yiTd br^in 
h IPLTMhax-MlT. Alj rwl u 

ppraff td^HNW-trida HfArcard 
■id n Rslrad lb Bps. Cbkt] 

mikL 

DownloatJ 


\ty .Hiijti iar m wv -AjJ 

lie iHAi# MFy 圚 flrtJtil _k J 

slki mJm parcnAflci wtrjva m 

WPS baklE #) §Eff 


slhM 關 Pli 


Listen 

All of imrhnabivrv mr^mlvilli^ ihi uilliar rrr 
^rs^WiiHuJ vnknp wnm% RnramM "； 為 
d^Ooillqa nAv Id |xi uli—kaal ■'.mlm 

■rd riwtioirnKl.redHBd n pu! ^railvdlim 
IlirkiH rliM^ A ifl'j'i-ah-ria- al&rh l|v hw 
«C dimliv Ihkv4ui u^nffan \hm ^iiboE irri 



Qk. nun^L 


tfiereiare no o 

Dumb Questions 


Koy/ 70 UV- yrcadc^r lets you 

ou-t wov-c abow 七七 ^ 

book Y/Vt “ 七 W ， 

|*,s-tc^ bo a lo^ dcs^iftioi, *1^ 

you dov\’*t W 灼七 *to. 


Does the page with the full text 
description need to have the same design 
as the site? 

Nope. Description pages will only be 
viewed by users with screen readers. So all 
you need is (semantically correct) marked up 
text. No CSS required. 


Will sighted users see the 
LONGDESC link? 

longdesc is only "visible" for 
people using screen readers. Sighted users 
won’t even know it’s there unless they view 
the source code for your page. 


Does longdesc work with all screen 
readers? 

Unfortunately, longdesc is only 
recognized by newer screen readers. Older 
screen readers didn’t have the feature built 
into them. Thankfully, current versions of 
JAWS, by far the most popular screen reader, 
support longdesc. 
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navigating without a mouse 


Your improvements are making a 
difference for SOME Audio-2-fro 
customers 



Legally blihd 




poov mo-bov- skills m 
Wis V^3^ds 


houseless usevs a\rc siill hav/mg 
lots d -trouble jcttrng av-ou^d 
Audio-Z-^o. Thcv-c^s siill Y/ov*k 
"to do on 七 he si-tc. 
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accessibility 


Accessibility is wot just about screen readers 

alt and longdesc attributes will get you a long way toward 
accessibility... but visually impaired users aren’t your only audience. Lots 
of folks out there have trouble with a mouse, or just prefer using the 
keyboard. That changes everything. 

The Web without a mouse? Yup, it’s going on more than you might think. 

And that means you’ve got to check your site out without a mouse. 



Open up the Audio-2-Go site in your favorite browser. Try getting around on the page just 
using your keyboard. You'll want to make heavy use of the Tab key. Can you get around? 

What order do things appear in? Does that order match up with the visual order of elements 
on your page? 

TIP. W youVc usmg Sa-Pav-i, pvess 

外 tioh-Tab to dyde though all the 

hoh—fo\rrh clc^Chts oh a web pay. 


Use numbers *to 

order 

that youv- keyboard 
lets you move 
■bWou# A^dio- 
wcbsi-tc. 


|_no 


Al> 4^ ? 1 A&H9-& BooLii 


■-卜 ll 占 1l: 

jj|” 




£l^n Up 

frrM \ 職 >□ urilb Audaor-lt^Cra and 

dvrTELMdJrii boolj LBKedii1eJy a JQ 5ml Li 

J^iLIf 401411 idiiftQi udt itpcLtL Cftld bci rtETlAd 
amid *n iu djiiS : srl L:i vi'qpu C 3 mr!l an|ffinfrr 

Download 


Cln^p to let xn^un 9 m □ k| 

ki^h^ulkir ijdia 51» br uk; Lc.jruur iPtnl 
*j alibtr Ml^-compubl# iDCbc> Aojjia jt^ 

fki I wlj* ^Jlil (.urLllMEi ?Ci ^ju iMli 

dawnlMd TtiEir b^ki mm tirpn 

Llfflati 


Featured Soaks 


IH 





☆ 




^hlJ t/C $ar|sQ£ikx wrm Tarri^Kl bj wlJipT i>r 

VOKK KlDSTi iminlni ID llJiJl- 
audio iirrmatM in ^^hewiuI vtodxtf 

■ Hal hllnllR |l£«i^|Vc^«dlyEL 

tlnudi Aud 19 l\m ■dcct^ca 

orf 1 jni^ki hn^iki an^nvhff rp lb 


fej 

I El 


o 


☆ 


C^ITyjL^( A^jdls npjA r^attw£. 
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using tabindex 



Your job was to check out Audio-2-Go with only your keyboard. How did your actual results line 
up with what your eyes were telling you? Did the Tab key do what you expected? Here’s the 
order of elements we cycled through: 


« 


七 his 
should 

Con\t 

•top scd*tior>... 

bu 七 I 七 domes 
las 七 m *tab 

ovdev*. 



The headev* ahd the ^a\v\ havigatioh to^t -fiv-st. 
9 ood -• what wc wahl smdc thcyVc ai 

the top o+ the paae. 





0 


Up 

nn qppi-LDifc ■Hrlii Aod4•□-•■€!>» nnrl hijEa 
isk^malujkJLDg All jryu iaici| im 

yqur muni nddrtM e.nd ei c^fli f/tt lEiuted 

and liCiu aix^Jid la dfpL < 

YQU wkh. 


Featured Books 


0bo 


wnload 

Oiku yoii umnlir yof[iT Kwcvunt ym, mu ik>wi^ofed 
\mm Dudci BJ^s lor Jq^dult if'yd 

in otli?T M mpolibI< nudici pLayw. AueIh 
Ga iIkp Irsdu ^aur puniaaa m you on 
laid ^iirbDDl^it 



^^Awniftld ； 

listen 


All d|! smr baaD^u nm tuxtitbEcxJ liy ika ai^hesr — 『 
prafi^uiEiE 2 il suiicxrK, nrti=_rElrd La hi^i^ 
d^iiliKan ： Aidjai farn^LTJi In prafi^ ^cml £Tudl{u 
Rnci pnj^^ufi^asLji 1 fdLlcd in pe^t -piici4uci]pa. 
1-bndi diiwn, ^FGen iim bud wSisjiK 

fflf a Min Iwik^ inywhi^Tf a 1 th« lii^hKl podtiihln 

fiuty. 




■u 


☆ 


☆ 


Copvlilii 4 /Aud!li> d Ocl tic. tfe ri^lix mvwL 


Tabbmg -Pv-om 
*tKc iicad'm^ 

takes us b> *tKc 
books. Ti^a*t 
doCS^*t SCCrw 
矿吵七 … v/V>a*t 
abou 七 all 七 he 
*m*tvo oy\ 

*tV>c lc*f*t o( *tiic 

阿？ 




货办〜 _ 

Try using Audio-2-Go without a mouse and without your eyes. 
Does the tab order seem more or less important to you when 
“viewing” the site through a screen reader? 
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accessibility 


Tabbing through a page should be ORPERLY 


Whether you’re sighted or not, the Tab key should take you through a web 
page in the same order that your eyes would. That means the tab order 
should flow top-to-bottom, left-to-right. That’s the way most sites are laid out 
and the way we process sites visually. 

For Audio-2-Go, then, we need to make sure the left-side text (Sign Up, 

Download, and Listen) comes before the book offerings. That gives users 
more context and tracks with what they might be seeing visually. All we need 
to do to fix this problem is add a tab index attribute to our elements and 
explicitly order our elements: 

<h2>Featured Books</h2> 

<ul> 

<li><a href="books/1" tabindex 

<img alt="the elements of cooking" src= M images/elements.png" / ></a> 
<br / ximg alt= n star" src= M images/star_high.png" /></li> 

<li><a href="books/2" tabindex="8 M > 


drc 'tcr^s Ih a list. So 
caA book | m k, provide a 
■wbihdcx 


= n 7 n > 


<img alt= M state of denial" src="images/sod.png" /></a> 

<br / ximg alt= M star" src="images/star_medium.png" / ></li> 
<li><a href="books/3" tabindex="9" > 


<img longdesc= M google.html" alt= M the google story" src="images/google.png" / ></a> 
<br / ximg alt= M star" src="images/start_medium.png" /></li> 

<li><a href="books/4" tabindex="10" > 


<img alt= M mary poppins" src="images/mp.png" / ></a> 

<br / ximg alt= n star" src="images/star_medium.png" / ></li> 

<li><a href="books/5" tabindex= n ll n > 

<img alt= M business of creativity" src= M images/creativity.png" /></a> 
<br / ximg alt= n star" src= n images/star—high .png’ ， /></li> 

<li><a href="books/6" tabindex= M 12 M > 



<img alt= M designing web usability" src="images/dwu.png" /></a> 
<br / ximg alt= M star" src="images/star_medium.png" / ></li> 
</ul> 


These kooks Will towc a-fW 3v>Y 

ay^a kcW ^ eleweyrb 如办 a 

Wi^cv -tafe'mdcx- 



All of the Audio-2-Go site needs a tabindex overhaul. Open up index.html and give a 
tabindex to all the elements that you feel need one. Keep trying out your page using just 
your keyboard until you’re sure you’ve got the page just right. 
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tabindex test drive 


ExeRc^Se 


<ul id= n nav> 


Below is the majority of the Audio-2-Go index.html markup (we 
skipped the parts that aren’t relevant). Here’s how we ordered 
things using tabindex... did you come up with the same markup? 




<li><a tabindex= n 1 n title= n homepage" href= n index.html n >Home</a></li> 
<li><a tabindex= n 2 n title="browse books" 
href="books•html n >Home</a></li> 

<li><a tabindex= " 3 n title= n about Audio2Go n 
href="about•html n >About</a></li> 


</ul> 

<div id= n featured-books n > 
<ul> 



i\\t mavkuf but Y\ttd *to 
kcyboav-d uscv-s. 


<li><a 

<img 

<li><a 

<img 

<li><a 

<img 

<li><a 

<img 

<li><a 

<img 

<li><a 

<img 


tabindex= " 7 " href= n /books/1 n > 

alt= M the elements of cooking" src= M elements.jpg" / ></a></li> 


tabindex= n 8' 

alt= n state of denial 


href = n /books/ 2 ’▼> 

src= n sod.jpg" /></a></li> 


tabindex= " 9 " href= n /books/3 n > 

alt= n the google story" src= n google.jpg" / ></a></li> 

tabindex="10" href= n /books/4 M > 
alt= n mary poppins" src= n mp.jpg" / ></a></li> 
tabindex="ll n href= n /books/5 n > 
alt="business of creativity" src= 

tabindex="12" href= n /books/6"> 

alt= n designing web usability" src= n dwu.jpg" / ></a></li> 


spa<^" 

doh 七 Wo\r\ry ; 
ihcyVc s-ti|| j h 
ou\r nr»a\rkup. 

creativity.jpg" / ></a></li> 


</ul> 

</div> 

» •參 

<div id= M info n > 


links aa doy/h ih the mav-kup, but 

厂， text should be tabbed h> before the 

/ j us 七 3bov/c i-fc f-thc book lihks). 




<h2><a tabindex="4 f, href = n signup">Signup</a></h2> 

<p> Create an account with <strong>Audio-2-Go</strong> and begin 
downloading books immediatly. All you need is your email address and 
a credit card to get started and there is no contract to sign. Cancel 
anytime you wish.</p> 

<h2><a tabindex="5 M href= n download n >.. .</h2> 

<p>••.</p> 

<h2><a tabindex= M 6" href= n listen n >...</h2> 

<p>•••</p> 

</div> 
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Tesr DriVq 


What does a keyboardless Audio-2-Go feel like now? 

Update index.html to use correct tab indexes. Then reload index . html and try 
working through it without a mouse. 


The tab should 

s*tav-*t pay 

keadev- and 





IT 


should jump 
b> the pajc 
ms*t\ru^*bioy\S (so 
uscv"S k\r\oy/ 

si*te 、 about). 


« n 






[a ， 


Hudio 



0 


Egin Up 

Cm . 1e an aq^Mint T^rlii 

yguf Mini ackkriw e.nd n 辑 rd iq gti icirtKl 
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theretare no o 

Dumb Questions 


So without a tabindex, fields go in 
the order of my markup? 


A ： 


Exactly. Browsers tab through 


elements in the order they are detailed in 
your XHTML, regardless of your CSS style. 


So why not just put things in my 
XHTML in the order they’ll appear on the 
online page? 


A 


费 


That’s not a bad idea... in fact, we’ll 


talk about that a little later. Although with 
CSS making it easy to change display order, 
using tabindexes still isn’t a bad idea. 


The tabindex attribute can be 
geared toward people who prefer a 
keyboard over a mouse because they’ve 
got less motor control over their hands. 
But what about people that have no use 
of their hands whatsoever? 

A- 

There are lots of web users who for 
one reason or another—such as paralysis 
or amputation—simply cannot use a mouse. 
Instead, they’ll use alternate input systems 
like pointing devices such as a head-mouse, 
head-pointer or mouth-stick; voice- 
recognition software; or an eye-gaze system. 
Most of these systems will also pick up on 
your tabindexes... so that makes a logical 
tab order even more important. 


Not everyone who’s got a visual 
impairment is blind. Does accessibility 
apply to these people as well? 

Absolutely. Visual disabilities not only 
include total blindness, but also include 
people who have types of low vision (also 
known as “partially sighted"). This includes 
poor acuity (vision that is not sharp), tunnel 
vision (seeing only the middle of the visual 
field), central field loss (seeing only the 
edges of the visual field), and clouded vision. 

Do visual disabilities include color 
blindness? 

Yup. Basically, color blindness is a 
lack of sensitivity to certain colors—such as 
red/green or blue/yellow. Sometimes color 
blindness results in the inability to perceive 
any color whatsoever. 

Do we have to pay any attention to 
hearing disabilities? 

Both deafness and hard of hearing 
are things that someone who is designing 
an accessible website needs to worry about. 
This is especially important when you’re 
working on websites that include rich media 
content, such as video or audio. 


Q/ What other kinds of disabilities 
should be considered when designing an 
accessible website? 

Two disabilities to consider are 
cognitive and neurological. These include 
learning disabilities, such as dyslexia, 
attention and focus disorders, such as 
ADD, developmental disabilities that impact 
intelligence, and even memory disorders 
(things like unreliable short-term memory, 
missing long-term memory, or even the 
inability to recall language). 

How do you deal with all the 
cognitive and neurological disorders? 

There are simple strategies that let you 
address cognitive and neurological disorders 
when designing an accessible website. For 
those with developmental disabilities, include 
graphics and images as an alternate way of 
communicating information. Also, sites with 
clear visual logic (something we covered 
back near the beginning of the book) help 
enormously to address many of the problems 
experienced by people with a wide variety of 
cognitive and neurological issues. 
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is accessibility worth it? 


This whole accessibility thing is 
creating a lot of extra work. Is 
it really worth it? 


O 

0 


Accessibility is ALWAYS worth the extra time. 

It’s really easy to ask yourself why you should care about 
accessibility. It’s unlikely that your audience will have disabilities 
that impact how they experience your site, right? Is this really that 
big of a deal? 

Actually, you almost certainly have someone with a 
disability trying to access your site. The U.S. Census Bureau 
categorizes 19.6% of the U.S. population as having some sort 
of disability. And if that’s not convincing, consider just a few more 
reasons why accessibility is essential! 


❶ The law requires you to be accessible 



Section 508 of the U.S. Federal Rehabilitation Act requires that federal 
agencies make their electronic and information technology, including websites, 
accessible to people with disabilities. In addition, many universities are requiring 
that all of their official web content be accessible. 


❺ Everyone benefits from accessibility 

Many of the enhancements and techniques used to make websites accessible to 
people with disabilities benefit those users without disabilities. Accessible websites 
are often easier to navigate, more user-friendly, and download faster. 

❺ Accessibility caw help your business 

Design studios with a strong understanding of accessibility will have an 
enormous advantage over those that don’t. For example, federal agencies who 
are required to abide by accessibility standards are sometimes unable to do so 
themselves. This means that if you have experience with designing accessible 
websites, you’ll have the opportunity to win those jobs. 

❹ Accessibility is the right thing to do 

Accessible websites represent an important step toward independence for many 
of the disabled. They provide crucial access to fundamental governmental and 
educational services and information that would otherwise be unavailable to 
individuals with certain disabilities. Designing with accessibility in mind makes 
the Web a better place for everyone. 
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wcag priority 1 checklist 


WCAft Priority 1 

WCAG stands for Web Content Accessibility Guidelines. The W3C, 
the folks who come up with most web standards, have defined a set of 
guidelines that will allow you to build accessible sites. Follow the WCAG 
guidelines and your site will be a lot more accessible than if you don’t. 

WCAG Priority 1 is the set of guidelines that the W3C considers as a 
baseline requirement. Ignore Priority 1 and you’ll definitely leave out some 
part of a disabled audience. Here’s what the Priority 1 guidelines look like: 


A A Pi Ch#flalifE £if fitw Wtb CantHil jhC^nlibiEiEv l.Q 




[OrGocigfc 



Priority 1 checkpoints 



h 七七 ?:// 丁 R/ 
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ki General fPrtorily i) 

Yes 

[Nd[N/A 

1,1 Provi^B a iBXt B{|uivalanl F?r npri-GQiet ^l^menl (gjg., via "pir. or In Qlernenl 

oanlent). Thin includes: imagBA, gmphfeDnl mpm 明 nlntiDfiB caF IbxI including aymbola], liruigfl map 
regiciri^, an mabpnE anlinat9(j GrF^), apploiE and pm^rammalj^ objects, apeii ml Frames, 

scnpte, i mages used ms lift bullets, &paD8r&. grapfiic^l buitons, soundE (played wilh pf wiihgul u^er 
inftBrad?ofi) r EiHJid^alon« audlq hleE, audi^ IrackE of vidieo, and video. 




|5.1 Ensure that all IntonnatJon with ca^ar Is also available withnjt »hor. Poro^amplo Piom 

conlQxt or msrkyp. 




■*,] CI^bjI^ idnntir^changfl^ m ihfl rmlural langusg 曰口 1 ei d □{: ufnfinl^s buidand any Inxl squivalanbi 

(s.g.. captiarm). 
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0 


o 


Whoa... that list is huge! Ifs going 
to take forever to make the Audio-2-Go 
site WCA& Priority 1 compliant... and weve 
already done so much work, anyway. 



The WCAG is exhaustive … but your 
changes may not need to be. 

The WCAG has to cover every conceivable possibility on 
almost every type of site possible. That means it deals with 
lots of things that may not affect your site. 

On top of that, lots of the WCAG checkpoints are things 
you should already be doing, like “Use the clearest and 
simplest language appropriate for a site’s content.” So 
many of these checkpoints may already be done! To 
meet Priority 1, you just have to take care of applicable 
checkpoints that aren’t already complete. 


r "^harpen your pencil_ 

^ Take a look at the checklist on the previous page or visit the WCAG checkpoints online at 

http://www.w3.org/TR/WCAG10/full-checklist.html. Below, write any changes you think 
need to be made to Audio-2-Go to fulfill the Priority 1 checkpoints. 
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looking closer at wcag 


%i|)arpen vour pencil 

Solution 


Your job was to figure out what we still needed to do with 
Audio-2-Go to make it WCAG Priority 1 compliant. 




1.1 Provide a lexl equivalent for eveiy non^lex! element (e.g. a via "aff, "longdesc 11 , orSn element 
content). This includes: images, graphical repnesenlations of text (including symbols), image map 
regions, animations (d.g. 3 animated GIFs), applets, and programmatic ob\Qcm, aeciE art, fram&& R 
sf^ripte, imagfis used as list hulleLs, spacers, graphical buttmiFi, sounds (played with or wilhout usar 

inlenaction), aland-afone audio files, audio tracks of video, and video. 
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accessibility 
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there J are no 

)umb Qv 


Questi9ns 


What is the difference between WCAG Priority 1 and 
Section 508? 

There are a few main differences. First, WCAG is a 
recommendation that was written by the W3C, the Internet’s 
governing body. Although the W3C has no authority to enforce its 
recommendation, it is considered the standard in making sure sites 
are accessible to individuals with disabilities. Section 508 is a US 
Government requirement that is based on the WCAG Priority 1 
standards. 508 requires all government agencies and companies that 
do business with the government to comply with the law. 508 is not 
enforceable in the private sector as long as a company isn’t doing 
business with the government. 

Can you be arrested for not complying with WCAG? 

Not at all. WCAG is strictly a guide for making your website 
accessible. Plus, the W3C doesn’t have authority to arrest you (or 
fine you, for that matter). Still, ignoring WCAG is like ignoring a part 
of your audience, and that’s not a good thing. Even a few days spent 
on accessibility can have a huge impact on your site. 


Who decides if my site meets the guidelines? 

For the most part, you decide. If you have followed along with 
guidelines and made an effort to make your site as accessible as 
possible to users with disabilities, you can call yourself accessible. 
Because Section 508 is a law, there are online services you can 
use that check and make sure your code is accessible. They will 
often allow you to post “badges” on your site that advertise the fact 
that your site meets the 508 requirement. Similar services are also 
available for the WCAG. 


Ignoring accessitility is 
ignoring a part oi your 

AUDIENCE. It kurts you, your 

site，and your users. 


Tkink about accessitility as 

a CRITICAL PMT of evety 

website tkat you ctesig[n. 
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color blindness 

Color shouldn't be your ONLY 
form of communication 

You already know that color has an emotional impact. It’d be hard to 
imagine a site without color... but that’s just how some people view at 
least a part of your website. That’s why you must convey everything on 
your site with more thsaijMst color. 
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Life through web-safe eyes... 

You’ve probably heard about web-safe colors before. Those are the 
colors that most people say are going to look consistent on different 
resolutions and monitors. Here’s a palette of web-safe colors: 



mtm _ 

■卿 _ _ „ _ 

m Jf ”_ H ™ ■■ ™ 




Life through color-blind eyes 


TV^csc W palettes look 

⑽ e do y 冰⑽ s see. 


But is this palette really “web-safe ”？ Take a look a the same 
through the eyes of someone with color blindness: 



来 These images arc -(-vow a sdaia 0 ^ a Uisibohe book 

(- \\bb^'Y / V/V/V/VisibohCdorm/^Vodud-ts/bvo\NSCvbook.lvtr«|). 




货办〜 — 

How do you think color blindness 
can affect your choice of color 
palette? Do the triadic and tetradic 
color palettes offer any help in 
dealing with color blindness? 
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common types of color blindness 


Audio-2-fto, via color-blmd eyes 

Let’s take a look at Audio-2-Go through a few different sets of eyes. 
Depending on the cones available to the viewer, our nicely designed 
Audio-2-Go site can look totally different: 



iudio 


is the oHgmal toU sdheme viewed 
by somcohc with ho toW bl'mdhess. 


1 Lm 1 MMm ka u 


Original 


TWis sV\oy/s a dw'm'is^cd coW 
Ut r,ost o-f elements 

av-c still dist'nrv^s^ablc. \ 



Peutanopia (no green cones) 
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TWs is a v-av-cv *tvpc o( to\or 
bl'md^ess i\\ai aWcdis yclloy/ *toy>cs. 
Ti^c s*tavs av-c domplc*tcly useless *m 

•this viev/ … v/h'ith dc-f mi*tcly violates 
l/VCA^ Pvioviiy I- 


Tritanopia (no blue cones) 


Pv-otahopia looks vc\ry similar -to 
Dcu^hopia whch -the 

Audio-Z-^o site- The pay looks 
blahd, a^d the s-tavs seem -fco bluv- 

■togc-thcir a 4iv- bit. . 


Protawopia (mo red cones) 
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adding labels to the stars 


Those stars area real problem 

So the stars at Audio-2-Go are a problem. It’s not bad that they’re 
in color, but it’s bad that they only convey information through color. 

Remember one of the easiest ways to fix bad graphics or navigation? 

Add text! 

So for the ratings, we can simply add in a textual rating. Then, we can 
add the stars as a background image, just like we did with navigation 
back in Chapter 6: 

<div id="featured-books"> 

<ul> 

<li><a tabindex= n 7" href= M /books/1"> 

<img alt="the elements of cooking" src= n elements.jpg" / ></axbr / > 

<span class="rating high">Rating : 8</span> 

</li> 

<li><a tabindex= n 8" href= M /books/2"> 

<img alt="state of denial" src="sod. jpg" / ></axbr / > 

<span class="rating medium">Rating : 5</span> 

</li> 

<li><a tabindex= n 9" href= M /books/3 n > 

<img alt="the google story" src= n google . jpg" / ></axbr / > 

<span class="rating medium">Rating : 6</span> 

</li> 

<li><a tabindex= n 10" href="/books/4"> 

<img alt="mary poppins" src= n mp . jpg" / ></axbr / > 

<span class="rating low">Rating: 3</span> 

</li> 

<li><a tabindex= n 11" href="/books/5"> 

<img alt="business of creativity" src= M creativity.jpg" / ></axbr / > 

<span class="rating high">Rating : 9</span> 

</li> 

<li><a tabindex= n 12" href="/books/6"> 

<img alt="designing web usability" src= n dwu.jpg" / ></axbr / > 

<span class="rating medium">Rating : 6</span> 

lA/c II tlass yvc i*b 


Add a lihc b\reak a^d 
a spah "to hold the 
hurwbev-. 


I <html> 

I <script src=” … I 
>”/> : 
<img 

srcs^siteLogo. 1 
png” /> j 

</html> j 


index.html 


</li> 

</ul> 

</div> 


tlass (U, 

W4, 


thereiare no o 

- Dumb Questions - 

So we can’t use visual indicators, like the stars, anymore? 

A- 

厂 V You definitely can. You just can’t only use visual indicators. So if you use the visual 
of a thermometer, you'd need to put a textual description next to that thermometer. 
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still 

background images are A your fricwd 

Now we can add the stars back into the page using CSS and the 
background property. So we need to make some additions to our 
stylesheet screen. css: 

_VVc v\ttd s level 

#featured-books li .rating { dlass -fov- v-atmy. 

padding : 4px 0 4px 30px; ^ - - 


font-family : Helvetica, sans-serif; 
font-size : small; dass heeds a 

text-transform : uppercase; . 十 } p^ddihg -to 


ihc way (oy -the sia\ 


.high { 

background : url('../images/star_high.png') no-repeat left; 

} 一 

.medium { 

background : url ( ' ../images/star_medium.png') no-repeat left 

} DcpChdihg Oh -the dass, wc will display the 

.low { Colored stav-. ~^ 

background : url('../images/star low.png') no-repeat left; 



screen.css 



Tesr DriVq 


Color without depending on color? 

Update your versions of index.html and screen.css. Then reload the Audio-2-Go page 
and check out the featured ratings of the books. 


V\fe 七， 6k oW 

七 W«S 七 ^ov/. 


(v( 0 Yi Neve’s a 
<xy-av^ ta ' ^ , 

ojf a booWs 


Featured Books 



STATE 

OF 

DENIAL 


WOODWARD 





☆ BATING: 8 ☆ RATING ： 5 ☆ RATING」6 
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content order 

There's more to ordering thaw just tabindexes 

You’ve already used the tab index attribute to make sure that the Tab 
key moves through your document in the right order. But the WGAG 
goes further: since there are certain accessibility devices that don’t use 
standard keyboards, your actual markup has to be in order. 

In other words, to meet WGAG Priority 1, you’ve got to order your 
XHTML in the sequence your content should be viewed, regardless of 
any CSS and tabindexing. 


To J)o 




so they 



㈤ 批 一 


TWis si 七 e has rb 乙 orrt ⑼七 
belova almost 

else... look ycat 

s*tylcdi CSS) but ^ oy \ *t 

satisfy WGM 代 ― 代州⑼ Is. 


C L i h [ s ^ c ， 

y° u d sor^cohe io 


i 



Header 

Masthead 

Content 

Sidebar 




Just because your XHTML is standards compliant doesn’t 
mean your XHTML meets this WCAG checkpoint. 

Having your site validate as valid XHTML just means that your markup 
is correct and without errors. The WCAG checkpoints make sure that 
you are using that markup to make your site as accessible to as many 
people as possible. The two are related but not at all the same. 
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It’s time to tick off another Priority 1 checkpoint with Audio-2-Go. Here are the relevant parts of 
the Audio-2-Go index.html. It's up to you to re-order the content. Good luck! 

The *tab*mdc%cs you some ov-dev-'m^.. bu 七七 he actual 

rwavkuf isy>’*t m the 

<ul id="nav> ¥ 

<li><a tabindex="1 n title= M homepage" href="index.html n >Home</a></li> 
<li><a tabindex= n 2 n title="browse books" 
href="books.html">Home</a></li> 

<li><a tabindex= n 3 n title= M about Audio2Go" 
href=’▼ about • html">About</a></li> 

</ul> 


%, 


<div id= M featured-books"> 
<ul> 


<li><a tabindex="7 " href= n /books/1 M > 


<img alt="the elements of cooking" src= n elements.jpg" / ></a></li> 
<li><a tabindex=" 8 " href= n /books/ 2 n > 

<img alt="state of denial" src="sod•jpg" / ></a></li> 

<li><a tabindex= "9" href="/books/3 n > 

<img alt="the google story" src= M google.jpg" / ></a></li> 

<li><a tabindex= "10" href="/books/4"> 

<img alt= n mary poppins" src="mp.jpg" / ></a></li> 

<li><a tabindex= "11 n href="/books/5"> 

<img alt="business of creativity" src="creativity.jpg" / ></a></li> 
<li><a tabindex=" 12" href="/books/6"> 

<img alt="designing web usability" src= n dwu.jpg" / ></a></li> 


</ul> 

</div> 

» 參參 

<div id= M info"> 


You v^ay wah-t h> 




<h2><a tabindex= n 4 " href= n signup">Signup</a></h2> 

<p> Create an account with <strong>Audio-2-Go</strong> and begin 
downloading books immediatly. All you need is your email address and 


a credit card to get started and there is no contract to sign. Cancel 
anytime you wish.</p> 


<h2><a tabindex= n 5 n href="download n >...</h2> 

<p>•••</p> 

<h2><a tabindex= n 6 " href="listen n >. ..</h2> 

<p>•••</p> 

</div> 



index.html 
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rethinking tabindex 



Your job was to rearrange the chunks of the Audio-2-Go page so that it has a more logical flow 
when rendered without a stylesheet. Here’s what we did. 


index•html">Home</a></li> 


<ul id= M nav> 

<li><a tabindex=T title="homepage ,f href: 
<li><a tabindex="2" title="browse books" 
href=”books•html">Home</a></li> 
<li><a tabindex="3" title="about Audio2Go 
href="about•html">About</a></li> 

</ul> 


<div id="info M > 

<h2><a tabindex= M 4" href="signup">Signup</a></h2> 

<p> Create an account with <strong>Audio-2-Go</strong> and begin 
downloading books immediatly. All you need is your email address 
and a credit card to get started and there is no contract to sign. 
Cancel anytime you wish.</p> 

<h2><a tabindex= n 5 n href= M download M >...</h2> 

<p>...</p> 

<h2><a tabindex="6" href="listen">•••</h2> 

<p>...</p> 

</div> 


<div> w -fca*tuv-cd—books 

<dw> makes i\\t fay display i\\t ordtr 

a s*tylcshcc*t is disabled ov unavailable- 


<div id="featured-books"> 

<ul> 

<li><a tabindex="7" href="/books/I"> 

<img alt="the elements of cooking" src="elements.jpg M /></a></li> 
<li><a tabindex=”8" href="/books/2 M > 

<img alt= M state of denial" src="sod.jpg" /></a></li> 

<li><a tabindex= M 9" href="/books/3 M > 

<img alt= M the google story" src= M google.jpg" /></a></li> 

<li><a tabindex="10" href="/books/4 M > 

<img alt= M mary poppins" src= M mp.jpg" /></a></li> 

<li><a tabindex="ll" href= M /books/5"> 

<img alt= M business of creativity" src="creativity.jpg" /></a></li> 
<li><a tabindex=”12’’ href= M /books/6 M > 

<img alt= M designing web usability" src="dwu.jpg" /></a></li> 

</ul> 

</div> 
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Tesr DriVq 


We don’t need no stinkin 9 tabindexes. 

Rearrange the order of your index.html and then reload the page. Things should look 
the same, but now we’re WGAG compliant. 



Us*m^ •tKc "lab key is 
a yea 七 >way b> vcv*i*fy 
youv s*i*tc stays *m 
ovdev- v/V>c^ you 

add v>cv/ scd*tioy>s. 


WCAG Priority 1 makes 
tabindex unnecessary. 

With your markup ordered correctly, go 
ahead and remove all the tabindex 
attributes from your index . html. Not 
only are they unnecessary, they’ll let you 
ensure that you’ve ordered things correctly 
by using the Tab key. 
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table headers 



Top Titles Featured Books 


TIk Black Swan •电袖 

FrrasntaJeiEKEi Zea clMkp 

Tiff DipEiJ Book ,n •的 



Mk OS X Leopard: The Mbsinf ； Manual Vu:-ii4 




☆ 


O 


Tile irih^nr Dew3ppffr p B C^kbc-pk. 


馨 夺神 


alidcztijpj^ 


Sp0rw 


Wait a second. Can you take 
a look at our Books section? 

I just want to make sure we 
didn’t miss anything... 




☆ 


O 


0 


Ci^it§i3 i C' A z Get Idc., Afl rfil-a nsaved. 
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〜Jharpeti your pencil - 

^ What WCAG checkpoints need to be taken care off on the Books page? Look back through 
the checklist on page 298 (or online), and see if there are any additional checkpoints that 
might apply... write what you think you need to do in the to do list below. 


"TKcsc dll "to be 
h^hdled -Po\r the Top 
Titles page as well. 



ttmt ： The Top Titles list is a table. 



Now that you know what needs to be done to the Books page, open up books. html. It 
should be in your chapter download files. Update the XHTML to be WCAG compliant, and 
meet all priority 1 checkpoints. Then turn the page to see if you caught everything. 
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checking accessibility 



EfeRciSe 


Your job was to update the books. html XHTML to be WCAG compliant and meet all priority 1 
checkpoints. 

To J)o 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict! 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1 


'http:/ / www.w3.org/1999 / xhtml" xml : la:H 


dodurh^h'ts 


<html xmlns 
<head> 

<title>Books | Audio 2 Go</title> 

<meta http-equiv="Content-Type" content="text/h 
<link rel= M stylesheet" href= M stylesheets/screen 
type="text/css" media= M screen" / > 

</head> 

<body> 

<div id= M wrap M > 

<div id= M header"> 

<hlximg alt= n Audio 2 Go logo" src= M images/ 

<ul id="nav M > 

<li><a title="Audio 2 Go home" href= M inde 
<li><a class="active" title= M Audio books" 
href= M books.html M >Books</a></li> 

<li><a title="About Audio 2 Go" href="#">About</a></li> 
</ul> 

</div> 

<div id= M book-list"> 

<h2>Top Titles</h2> 

<table cellpadding= M 0 


si 


FVovide a ici (or all 


All Co\oY ih-Pov-rha*t 
displayed wi-thou-t doloNs y/dl 


ioh rhus*t be 


so 


■they 


a 


w*rthou*t siyUshceis 

s . y>^d. y：ovy a^d 




pid you tK'is 






^ Books v>as a tabic, “vc 
^七 add table kadnr>y. 


5J For data tables idently row and column headers. 


r^D^ciuj- 丄丄 y • 


XT 


U.C.L ■ 



M just heed aho*thc\r table VOYJ, 

With a hcadihg -foir dolumh. 


<tr> 

<th>Book Title</th> 

<th>Price</th> 

</tr> 

<tr> 

<td>The Black Swan</td> 

<td class= M price">$l9.99</td> 

</tr> 

<tr> 

<td>Presentation Zen</td> 

<td class= M price">$12.99</td> 

</tr> 

<tr> 

<td>The Digital Photography Book</td> 

<td class= M price">$12.99</td> 

</tr> 

<tr> 

<td>Mac OS X Leopard : The Missing Manual</td> 
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<td class= M price">$15.99</td> 

</tr> 

<tr> 

<td>The iPhone Developer * s Cookbook</td> 
<td class= M price">$19.99</td> 

</tr> 

<tr> 

<td>slide : ology</td> 

<td class= M price n >$7.99</td> 

</tr> 


<tr> 

<td>The Numerati</td> 

<td class= M price">$11.99</td> 

</tr> 

<tr> 

<td>Spore : Official Game Guide</td> 
<td class= M price">$21.99</td> 

</tr> 

</table> 

</div> 

<div id= n featured-books M > 

<h2>Featured Books</h2> 

<ul> 





TWis pay ws already ov-dcv-cd 

Top Books list, 

七 he -features. So v/c d'»d^ *b 
•to do ^ v-c-ov-dev-'m^ 


<li><a href= M books/l M ximg alt="the elements of cooking" 
src= n images/elements.png" / ></a> 

<br / Xspan class= M rating high">Rating : 8</span></li> 

<li><a href= M books/2 M ximg alt="state of denial" src="images/sod.png" /></a> 

<br /Xspan class= n rating medium">Rating : 5</spanX/1 i > 

<li><a href= M books/3 M ximg alt="the google story" src= M images/google.png" /></a> 

<br /Xspan class= n rating medium">Rating : 6</spanX/1 i > 

<li><a href= M books/4 M ximg alt= M mary poppins" src="images/mp.png" /></a> 

<br /Xspan class= n rating low M >Rating: 3< / spanX/1 i > 

<li><a href= M books/5 M ximg alt= M business of creativity" 
src= n images/creativity.png" /></a> 

<br /Xspan class= n rating high">Rating: 9</spanX/1 i > 

<li><a href= M books/6 M ximg alt="designing web usability" 
src="images/dwu.png" / ></a> 

<br /Xspan class= n rating medium">Rating : 6</spanX/1 i > 

</ul> 

</div> 

<div id= M footer"> 

<p>Copyright &copy; <strong>Audio 2 Go</strong>, Inc., all rights reserved.</p> 

</div> 

</div> 

</body> 

</html> 



TKis is same 
made 

*to 

y/c v\ttd 

jus 七 images, (or 
七 he book \ratm5s. 
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wrapping up accessibility 




TesT DriVq 


Test Audio-2-Go’s accessibility. 

It’s all well and good to implement accessibility measures, but you also need to test your site. 
So how can you do this? Well, there are a couple of ways: 

Get a copy of the assistive technologies in question (like a screen reader) and take the site 
for a test drive yourself. Or, even better, you can use software, such as Cynthia Says, that 
automatically checks a site for WGAG compliance (http:/ / www.contentquality.com/). 

Update both the home page and the Books page and see how Audio-2-Go looks. 


nf? 

U. 1 l&l 1 e4i^V 





Auilfo 



Sign Up 

Crute uLiQBvi: Mtfc. Am 
Aiuidciidsr4l>?cib> ii'iifw 
3^PK ： HT14|^ wilE tPA «r^ ■ \ 
jiiJ I^ip it nil 
HiUh. 

Download 

•OfM 5WI CT4Mk< JfillT 
nur liE^li-ijiiiallJji 
or rdb#c MS^j-mnrpial 
Qfl ftl ril lEBfkl jai jj* puiq 
土 vnJaoi] ^cxar tBilikp ia| 

Ltsten 

AlJ iifiiur lijnlbi. sr# nsri 
jcyiwgiiinal wil^f 
Jvfin.ll^aKi av Ji : 
mni fdUv 

liicdj 知 
pi Kjd49 pq 



<iL (jLUL ■' 


Audio 


_K? 1 * 1 】 


Top ntt« 


Featured Ooak» 


"Tbt Dlick 9n v u 


PZWEUJ£L« 


Thr n ^l<J PhC4u|fl^>^i IaoIi 


Mat US X ， l^upu'd: The Mlko^ MMm 

oij li^p^ 


lkK：^ie 


I _ 

企 w Na . i 合 Asitd 


TtM ： Cf imc Ml i 

Spc>Ti. Of!kii!l Gaew Guide 


*r-» 

fLL«4 



wrwS » ☆ whmi 




fy\!t /\udlO—2-—d *tcs*t *tV>C 

Cy^'»a Says validaW 
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R T fludio2go®amflii.com ! I 


Say goodbye to tastes forever I 

Audio 2 Go Rhf^w 

AutilO 2 Gflv 

GrcaE woiUm your site! I 
really love it. we ran tun 
1 [ ML and you've mstWLiAU I 'nenty 1 
forward witli ^tsluEMJinc our lax rorma. 1 — 

hirt wR'vf. rome 叩 with sranfi 
wnrk 'JVh^wfHilcI you-think ahmri you 
as you'll host our fewms. i - 

wa^... if you anif wrifjfctywy lh tmilratlufs ,. 映 

{ wining m glva two ckt inemittie same tax-frao axanpuem you d enjoy 
wort® 〆 < 


our team kxsKat whst vourve done. aiMi wc 
t all Dfourvaiwa^anfl vai'vcqot valid 
l nice wrK! We ! d litce To move 
we'm ms Mol a budget enmen nwe 

rreatws irtftas tfi? y 0111 ^ 

I npvp.r paying taxfts 呼 in? As king 

rjwfikter yourw.ll a tax-lfftp ftnHty Fnjoy< 




Lor saMJfl 

mxrtttHiMy 


Thk ll« 

mwifTli 


]dan& Tax Ex9Ripl Fund 
No t^riUMaT, leddml alurfialA'Ci 

lili^Ki'slain-iimasnwUci find 
www.uflSurrEi.cDm 


Looks like bemg a^essible 

is \rcally payihg of^f 


you’ll never believe the email 
I just got! You really hit it out of 
the park with the updates you made. 
And I hope you don’t mind not paying 
taxes anymore... 


you are here ► 


317 























































looking good 


TV>c IA/CM ^cdklist is domflc-bc! 


_ JYY1 





BULLET POINTS 


■ Accessibility is both the process and the techniques 
used to create a site that can be used by someone with 
a disability. 

■ A screen reader is a piece of software used by the blind 
and the visually impaired that reads the text of a website 
aloud. 


■ tabindex lets you manually set the position of a 
specific link in a tab sequence. 

■ The Web Content Accessibility Guidelines (WCAG) 
from the W3C were the first major effort to establish 
guidelines for accessible design—it consists of fourteen 
guidelines, each with three checkpoint levels. 


■ The alt attribute (which is part of the img element) 
allows you to provide an alternate text description for an 
image—which is read by the screen reader. 

■ longdesc is an attribute of the img element 
which provides a link to a page which contains a text 
description of an image that is too long for an alt 
attribute. 

■ People who have lost motor control of their hands often 
use the Tab key instead of a mouse to move from link to 
link on a web page. 


■ You don’t have to worry about items on the WCAG 
checklist that don’t apply to your site. 

■ Organize the markup of your page so that it reads 
logically if it were not rendered with a stylesheet. 

■ Make sure that all information conveyed with color is 
also available without color. 

■ If you use tables in your site, make sure that columns 
and rows have headers. 

■ Use software like Cynthia Says to check the accessibility 
of your site. 
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9 listen t9 your users 


♦ The Pathway to 
Harmonious Design ♦ 



Ever since I started really 
listening to my users, people just 
can’t stay away from my site. I barely 
have time to look at the stats over a 
cola these days! ^ 






Good design is all about really listening to your users. 

Your users can tell you whafs wrong with your site, whafs right with your site, how 
you can fix things (if necessary) and how you can improve your site. There are lots of 
ways you can listen to your users. You can listen to them in groups (using tools like 
surveys), listen to them individually (with tools such as usability tests), and listen to their 
collective actions on your site (with tools such as site metrics and statistics). Whatever 
method you use, its all about “hearing” what your users are saying. If you do, your site will 
meet the needs of your audience and be that much better for it. 
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rpm (bad) reviews per minute... 


Problems over at RPM 


I keep on getting angry emails from 
my customers. They re all complaining 
about the same problems with the site. 
You built the site for me—now Tm going 
to have to ask you to fix it so it works... 
properly this time! 


0 


A fy ri 


KPM 







N 

The ( 灼。七 

so happy) 

RP/i/l yi/iusk 

S-bov-c 

0^y\Cr 
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NSw St RPM Music 



CMail 

Where are you guys 

^g^kprTwr ~c]?umrniBd 吞 
To; rp^nmyite^BmBirf.wfni 

R 吻 Dud« 4 - 

JuEt uw Ihfl- rww gr 邮！ Orw quvitcKi 加 ugh; I ; 

\Q find arrytfT^jf «nlKl iurfpmaflwfn Of 9 m?p lo ymjir vlgrv, tm 
rrnm ；nwn cind riMd/ En ymg ^unj pu^E^kcirl 

tik« itna ±Muld bt mi MJiytod 

rvHti*d it. Anyway, v/oM hi¥» ie cam qua Btvi t#« m« u 
ItMfey. nest 


Gc^dii 


JIPM Miis'c ^rpmmu 




lems 奴肋 the new site 

ovi&ic^a 柳 1 说如 


5 认 ㈣ 


judd^n vour site c = 3 工工^:二 

cl ine don l r . xw flR » w；uni ' 

「加 rfl 邮扯 I 咖娜 _ 1 ⑽“ 

AJb LiAi I lTSILI.V3 i 1 


diriicwB- 


ThanKs. 


CoflDftr^ Cufriaf(»f 
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Fram 


FliPU 众 pmmn^ip 洛 'gmni [. 印 m> 


SiL Aug 2^. 20 帥 as 4;i3 PM 


How could we have missed 
these problems? We really 
need to find out exactly whafs 
going on from the users. 


O 


o 










tew site disappoints 


秘 M Gsiyg. 




What [he f»ck did mj nnw. M n ^ 

9£ tha£ S6fini ^ ot plMa . it ⑽刷 _ 掷 

S u， /s, rthaft going ono 


Thanks. 

■•"^rv iMtisic, Lover 


如 W Music 叫 mmujlc 發 gmalM 


S»t Aufl S3 r 2tHB at 4：| J 
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surveys and focus groups 


Let your audience speak to you 
through focus groups and surveys 


When you’re designing, redesigning, or fixing a site, you need to be able 
to ask your audience questions. Who are they? How often do they use the 
Web? What kind of computer do they use? What do they like about the 
site’s current design? Do they like the site’s proposed new design? 

This is where focus groups and surveys come into the picture. Both are great 
tools for giving your audience a “voice” 一 letting them give their opinions, 
answer your questions, and even give feedback in unexpected ways. It’s 
important to know that surveys and focus groups have different strengths 
and weaknesses, and those could impact which you use. Let’s take a look at 
some pros and cons of both: 



Remember as wc talked 
about ih Chaptcir 午 , suv-veys 
⑽ a gircat ioo\ buildiha 

p^sohas at the J 

youir design pv-o^css. 



PROS 

CONS 

Surveys 

Require a relatively short time commitment 
from survey participants 

—— 一 

Gan be administered to a huge amount of 
people 

Written surveys may present problems for 
lower-level readers 

Gan be administered in lots of ways (paper, 
online, by phone, in person) 

SUrVeyqUeSd0nSmiShtbe ^^^^^^ 

Participants can often complete the survey 
at their own leisure 


Focus Groups 

Allow participants to build on each other’s 
ideas 

Require larger time commitment from 
participants 

Collects information on a very specific topic 
from those who have a stake in the topic 

Usually require compensation for the 
participants 

Benefits from a trained facilitator 

Public environment may intimidate some 
participants 


一一 t 迦 _ 
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listen to your users 



Read through each of the scenarios below and decide which 
method (survey or focus group) would be best for getting the 
information you need to make your design decisions. 

Write your answer on the dotted line. 


Scenario 1 

You’ve been hired to design a website for a local community 
access television station. The client wants to add all sorts 
of cool — but bandwidth intensive — Flash interactivity and 
video. You’re worried that this extra media might be too 
much for the site’s users. 

You need to find out what kind of computers the TV station’s 
viewers use (make, model, operating system, etc.), as well 
as their connection speed (dial-up, DSL, Cable, etc.) so that 
when they come to use the site, it doesn’t fall over under the 
pressure of serving all that rich media content. 


Scenario 2 

You’re doing some volunteer design work for a local 
inner-city community center. You really don’t know that 
much about the site’s users — gender, age, computer types, 
etc. — and you really need to find out so that you can target 
the design at the right level. The director of the community 
center did tell you that some of your users might have a 
low literacy rate. 


Scenario 3 

You and some friends are launching a new social network 
for web designers and developers. You’re at the point 
where you’ve got a couple of different visual designs (really 
polished storyboards), and you need to get some specific 
feedback on what your potential audience thinks of the 
site’s design. You’re also pretty sure that your audience 
(who are designers themselves) will probably be up for 
sharing some their great design ideas with you. 
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dive into surveys and focus groups 



Let’s take a look at whether a survey or focus group is the best choice 
for each of the scenarios. How will you implement your choice? 


Scenario 1 

You’ve been hired to design a website for a local community 
access television station. The client wants to add all sorts 
of cool — but bandwidth intensive — Flash interactivity and 
video. You’re worried that this extra media might be too 
much for the site’s users. 

You need to find out what kind of computers the TV station’s 
viewers use (make, model, operating system, etc.), as well 
as their connection speed (dial-up, DSL, Cable, etc.) so that 
when they come to use the site, it doesn’t fall over under the 
pressure of serving all that rich media content. 


Scenario 2 

You’re doing some volunteer design work for a local 
inner-city community center. You really don’t know that 
much about the site’s users — gender, age, computer types, 
etc. — and you really need to find out so that you can target 
the design at the right level. The director of the community 
center did tell you that some of your users might have a 
low literacy rate. 


Scenario 3 

You and some friends are launching a new social network 
for web designers and developers. You’re at the point 
where you’ve got a couple of different visual designs (really 
polished storyboards), and you need to get some specific 
feedback on what your potential audience thinks of the 
site’s design. You’re also pretty sure that your audience 
(who are designers themselves) will probably be up for 
sharing some their great design ideas with you. 



Surveys aire ^ 

ettihg lots O-P ih-Poirmatioh 
3 — Stroup people. 


V-om 


Survey 


TW»s \s a 


• TV>c 


二)，二二 

〆 

Fodus 今 roup OK Survey 


TW、sa s^all 
■ 1S c%adl 7 ^ 


Fodus ^\roup 
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Surveys and focus groups aren't free 

When you’re deciding whether to use surveys or focus groups to find out 
about your users, there’s another thing to consider: cost. If you start out 
doing user testing with the comparative costs of surveys and focus groups 
in mind, that may help you decide which is the right route. 


Survey Costs 一 is as -they say. 

$ Time spent designing the survey 
$ Printing and mailing (if you are conducting a paper survey) 

$ Time spent processing and interpreting the results 


Possible compensation to survey participants 


Focus Groups Costs 

Time spent planning the focus group schedule 


You i just opCh tKc doov* dhd 
0v-ab pevsoh - you heed 

"to 3 lo*t o-p 七 ime dhd C-rPovt 
•m*to \rc^\ruitihg people who ave 
v-cp\rcsch*taiivc of youv site s audiehde. 


Recruiting participants 



wodcva*tov ^ } 

W—7 skilled at ^at 
do and ^^all 7 

dor\*t tomC 



Rent space to hold focus group (if you don’t already have it) 

$ Equipment rental (projector, screens, recording devices, etc.) 
$ Food and/or compensation for participants 
$ Time spent processing and evaluating the results 
$ Any additional supplies 
$ Cost of a trained moderator 



Sharpen your pencil 


Its ^ V US T 0U? 

feme. TV^at Aot^i V^avc c 

U ^ ^ d/mks ^ a1 ' a e 


Now that you’ve got a good idea of the pros and cons of surveys and focus groups 
(and how much they could cost), write down the method you’d use to get feedback 
from the RPM Music site users. Also write down why you chose that method. 
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^Sharpen your pencil 

Solution 


Which method for gathering feedback from the RPM Music users is 
probably the best, and why? Here’s what we thought: 


A Survey/ 


驗 as? 


Wt tittA *to yt *m-fo\rr«a*tioh -f\rom as of RPM Musid Customers ds dKcaply 3s possible 
(\rcmembcv-j, we Y\ttd *to mndke *thc oymev* happy). ^\so, usih3 a survey will allow us bo to\\tc{, *m-fo\nnr\a*tioh 
ov\ browsers dhd opc\ra*t'mg systems — whidh jus*t provide a solution *to our problem. 

RP/W is a web sb>^, so H ^ kcs sey)Sc yf 

to pirov.de usm with a survey -fco U\ 

。以七 while ihcyVc ohlihe. 


Youre going to use a survey 
to try to get at the root of 
the problem? Ok, that sounds 
good. You can use my customer 
database to get in contact with 
my customers. 



Surveys are ckeap anct 
elective, especially wken you 
give participants; tke option oi 
completing them online. 
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Swvvcys. B 印 

This week’s interview: 

An online survey tells all 


Head First： Welcome, Online Survey. We’re very 
excited to be talking to you today outside of the 
World Wide Web. 

Online Survey： I know, this is very exciting! It’s 
been years since I’ve appeared in ink. 

Head First： So tell us, why the big move to the 
Internet? All those tags and hypertext seem a bit 
overwhelming. 

Online Survey： Well, it just seemed like the right 
move. I mean, sure, the initial setup took a little time, 
but after that I could just sit back and watch the data 
come pouring in. 

Head First: Did you find that you received more 
attention as a web page than you did when you were 
printed on paper as a bubble sheet, say? 

Online Survey： Oh, definitely. People have bad 
memories of filling out all those bubble sheets in high 
school. Also, being available online makes it easy for 
people to take me at their leisure. No pressure, you 
know. Oh! And if it’s a long survey, they can save 
their answers and come back later. 

Head First: Well that’s convenient. So where do 
you keep all that data? If people aren’t writing it 
down, where does it go? 

Online Survey： Sometimes I just send an email 
with the answers. Most of the time, though, I keep 
everything in a database so that I can go back later 
and quickly see the results. 


Head First： Wow! That seems technical. How do 
you manage all that without losing your cool? 

Online Survey： Well I’m going to let you in on 
a little secret. I’m no wiz-bang programmer or 
database analyst, so if it’s a complicated survey, I 
just use one of the many free survey tools available. 
They help me set up the questions, format, and even 
process the data, and then they send me the results. 
In the end, I come out looking like the hero. 

Head First： Interesting. Don’t you feel like you’re 
cutting corners if you don’t do all the work yourself? 

Online Survey： Hey, if you want to spend all day 
writing code and HTML tags, that’s your business. 
But time is money, buddy, and I just want to get my 
questions answered. I don’t have time to deal with all 
those details. Not only does an online survey save my 
users time, it also saves me time. 

Head First: Well that seems fair, and who can pass 
up all those colorful charts and graphs? 

Online Survey： Not this guy. Believe me, going 
online was the best move of my life. We wouldn’t be 
talking if it wasn’t for the Web. 

Head First： That’s true! We’re glad to have you. 
Thanks again for talking to us. I’m sure we’ll be 
seeing you soon in some reader poll or career 
questionnaire. 

Online Survey： You bet. Thanks for having me. 
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survey questions 


Ask the right questions 
m your surveys 


So you’re going with 
a survey, but there’s a 
problem. What questions 
are you going to ask, and 
how will you ask them? 
Oftentimes online surveys 
either ask the wrong 
questions or ask questions 
that return unreliable data. 
You really need to invest 
some time in crafting your 
survey questions so that 
you get the best possible 
data you can. Let’s take a 
look at what makes a good 
survey question. 


a 


vc youv* uscv*s Bj 

ar\A V dr>d make i\\c 


w) dnO \y dlW rnaNC u c 

options dlcav air>d Com^ise- 

A ^ood survey <piestion has Specific answer choices. 


A ^ood survey <piestion does not lead ike 
participants to any particular answer. 


A ^ood survey 驭 estion is short. 

A ^ood survey <piestion is easy 
to read and understand. 


USCV-S, 


(*P you doh-Pusc youv- 
they gomg -to provide 

you with au^aie ih-Pov-^a-tioh. 
P«3y dlosc "to liow 

you woird the ^ucstiohs. 


A ^ood survey <piestion asfe for knowledge 
or an opinion, but never badiat once. 


tJiereictre no o 

Dumb Questi 9 ns 




What if I want to ask an open-ended question? 


Just don’t provide answer choices, and phrase the question so it’s clear that you want 
the participant to answer in their own words. Open-ended questions are great for getting 
qualitative data. Qualitative data is data that isn’t numerical in nature. So if you were to 
ask survey participants what operating system they use, your results would be numerical 
(58% Windows XP, 5% Windows Vista, 30% Mac OS, 7% Linux). But if you asked survey 
participants to describe the technical problem they are having with a website, each of the 
responses will be different, and the results will not be numerically based. If you ask an 
open-ended question, be prepared for more work when you put your results together. Each 
response will be different, and you won’t get the same statistical (numerical) results that 
you’d get with other kinds of questions. 
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listen to your users 




Now that you’ve seen what makes for a good (and not so good) survey question ， it’s time to put 
your skills to the test. Below you’ll find some survey questions that could use a little work. Have 
a look at them and write down the problems with each question. 



Which is your browser of choice? 

A. Internet Explorer 6 

B. Internet Explorer 7 

C. Internet Explorer 8 


❺ 


Does your current CMS publish 
W3C-compliant markup? 

A. Yes 

B. No 

C. I don’t publish with a CMS 



There are many people who believe that 
designing with web standards is a waste of 
time—are you one of these people? 

A. Yes 

B. No 



Do you believe that the current single column 
layout website in question is bad and should 
be changed to a two-column layout? 

A. Yes 

B. No 
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writing good surveys 



Let’s take a look at the survey questions and see what we can do to make them better. 



Which is your browser of choice? 

A. Internet Explorer 6 

B. Internet Explorer 7 

C. Internet Explorer 8 


TV^c cuACst'»ov> bad, W*b 
仏 c possible avc 

m\slcad'»^ 


r 一 一 — 一 — 一 — 一一一 ■■一 一 ■■一 一 ■■一 一一一 一一一 一一一 一一一 ■■一 一 ■■一 一 ■■一 一一 一 — 一 i 

I The problem with this question is that it’s biased. Biased questions encourage your participants to ■ 
I respond to the question in a certain way. They may contain terms or may be worded in a way that [ 

I leads the participant to a specific answer. Here all of the associated options are Internet Explorer ■ 

I (though different versions). What if the respondent uses a different browser? Well, their only [ 

I option would to choose “Other,” if it were available as option D. That would ultimately skew the ■ 

I results (because you won’t get any differentiation between browsers besides Internet Explorer). [ 

I This question may also mislead participants into choosing Internet Explorer just because they ■ 

I have it in their system (as opposed to being their primary browser). [ 


A better browser question might be. 



^ Tk ― 咖 a ; d 

Which is your browser of choice? V^c. 

A. Internet Explorer 


B. Firefox 


C. Safari 

D. Mozilla 


Opera 
F. Other 


Ti su\rc this ^ucstioh 
^ ,s ⑽七 biased, wc heed io 

^ - ^ ^o\Us -Pov- 

b\rowsc\rs fho-fc just |£). 
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❺ 


Does your current CMS publish W3C-compliant markup? 

A. Yes 


B_ No 

C. I don't publish with a CMS 


I Although this question if focused and simple, it falls into a common trap. The terms ■ 

I “CMS” and “W3C-compliant” are only used by a small group of people within web | 

I technology circles. Even though some users may recognize the terms, most won’t and ■ 
I you risk confusing and frustrating your survey participants. Avoid using jargon in your | 
I questions and always try to write to the broadest audience possible. ■ 

L ■ — 一一一 ■一一 一一一 ■一 ■■一 一一一 


Less jargon 5 better understanding 2 accurate responses 

❺ Does your website code validate as standard XHTML or HTML? 

A. Yes 

“o 


#1 


C. I don’t know 




_ 




^there^SiVe no ^ 

Dumb Questi9ns 

How do I know if I’m using jargon? And how can I get rid of it in my questions? 

Jargon is pretty subjective. What is jargon to one person isn’t necessarily jargon to 
another. There are two things you can do to make sure your questions are clearly written. 
First, re-read your questions and think about your audience—try to phrase things as simply 
as possible. Second, give your questions to someone who isn’t familiar with the subject 
matter. They’ll tell you if they don’t immediately understand something you’ve written. 


► More questions over tire pa^e... 
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writing good surveys 


Solution 


Let’s take a look at the survey questions and see what we can do to make them better. 



There are many people who believe that designing with web 
standards is a waste of time-are you one of these people? 

A. Yes 

B. No 丄， 

Read 'ucsW It s a 

s-bv-oy\5 of miow y ou 

asked -bo aycc ov disagree 
>/ 狀 , 孙 d 4a-t tould lead youv 



r — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — t 


i This question’s problem is that it assumes what it asks. This is a type of biased question that 
■ leads your participants to agree or respond in a certain way. 



Ufs not assume... 



Do you agree of disagree that designing with 
web standards is a waste of time? 


A. Agree 
^rB. Disagree 
C. Undecided 



Po^-t lead <\ucstuw 叫狀 
^ TV^'is Will always 

skew 栋 c \rcsul-b av>d 州 akc 

七 survey l« ss ⑽出 Wc. 
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Do you believe that the current single-column layout website in 
question is bad and should be changed to a two-column layout? 


A. Yes 

B. No 


I The problem with this question is that it’s two questions. Participants won’t know ■ 

I which to answer. What if they agree with one but not both, or disagree with part or all | 

■ of the question... How do they answer then? This can make them feel frustrated and ■ 

I could lead them to quit the survey without finishing it. | 


Just ask owe question 


O Do you like or dislike the current one-column layout in the 
website in question? 

A. Like 



B. Dislike 

C. Undecided 





l-f you yes ar\d y\o options, 

aly/dys w ur\dc^idcd oft’。 於 

•to to^Cc y/i*t^ou*t 3 

s*tv"OK\^ 


❺ 



Do you believe that the layout of the website in question 
should be changed to a two-column layout? 

A. Yes 

B. No 

C. Undecided 


l^siesd askih^ two 
\y\ ohC ^ucs-tioh, 
ask two ^ucstiohs. 

/ T\\tst ^cstioy\s y/»ll be 
easier *to ur\dc\rs*bay\d 
ay\d will v-csul*t m w>o\TC 

a^^uv-a-tc data. 


you are here ► 


333 









writing survey questions for rpm 


^Jharpen your pencil_ 

^ It's time to start building your user survey to help RPM Music. Write five technical 

questions to start with (what kind of browser users prefer, what kind of computer 
they have, etc.), then ask five demographic/usage questions (gender, age, how many 
hours/week do they use the web, etc.). Make sure you write questions that have 
answer choices, are short and straight to the point, and don’t lead the respondent. 
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listen to your users 


Pemographic/usage questions: 


D . : 0. 

How houv-s/week do you spc^d oy\ *tiic 




0 - S houv-s 


B. 厶一 10 houvs 


C. " - 1 弓 hours 


D- I^> — 2-0 hours 


E- Z0+ houv-s 



o 


o 
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rpm survey questions 



Let’s take a look at some possible technical and 
demographic/usage questions you could ask RPM’s users. 


Possible technical questions: 



is your primary browser? 

B. Pirc-fo% 

C. Safari 


D. Opera 

E. father 




TW»s »s 'ucsW 

because some Woviscv-s V\avc 
pc6uV«av'»t>c s m ^ ov, 七 ㈣ 
vc^dev CSS. 


© 


is your domfu*te\r’s operatm^ sys*tcm? 

A- WAmdows )<P 


B. W/ihdows \/is*ta 

C. Mac OS ,)< 

D. Lmux. 

E. 


>, c .a 7 be aWe -to v/ovk out ^ 
WoJvr ^e 7 Ve l-,kel 7 -to be usm 5 
sm6e all o—M s 7 sW co^t 

^\i\s O^t mstallcd V>7 deWt. 



is 七 he \resolu*tioh you\r 
dorwpu*te\r mohi*bo\r? 

A- 900%i>00 


B. loz^lts 

C. IZ0O%IOZ 午 （or above) 



/\s you disdovcv"cd bstk ik\ Chap 七饮十 ’ 
Street resolution ^ V^avc a bij 

OY\ youv- usev-s view you\r site, so it S 
"iw>fov-tar\*t m-fov-matior\ *to 


D. I dor\’*t kr\ow 
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Possible demographic/usage questions: 


o 


l/Vha*t is your gender? 

A- /Wale 
B. Female 


o 


Do you buy n\\AS\C Ohl'me (doymloddable o\r 
shrmk - wrapped)? 

A- Vcs 

B- No 

C. Doh’*t khow 


o 


ttow hours per y/eek do you spe^d o^lme? 

A. 0-5 

B • 各 - lo 

C. II - 15 
p. H> - zo 
E. Zl - Z5 
F Zi + 


^endev-s ohc c^f -those 
^ucs-tiohs that dll suvveys ask, 
o*P theiv- subject 


Pcpcr\dm5 oy\ s»*tc s 

CoY\itY\i } yv\dtr c^y\ play a 
lar^e or small fav-b m youv- 
des'i^y\ decisions. 


Po y 喊 usevs cvw Wy 一比 

owlmc? TW«s may seem like ^ 

obvious 'vACS*bov>，bU 7 ⑽ 

(W 七 ask! C st_ 铷 aV、s 

lu Wt 广七 

o-tV^cv Wmds ok sites- 



TV a^ou^-t o*f time a usev 
sp^ds oy. lA/cfe s ? caks t> 
呼⑽乙 c 。灼 Uc - >wWA Wpadts 

ho>w tV^cY use 70UV si-tc. 
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final survey 


The final RPM Music user survey 

Here’s the completed survey ready to upload to the site 
(or use a survey service to conduct it for us). 


1_ What is your primary browser? 

A. Internet Explorer 

B. Firefox 

C. Safari 
D_ Other 

2. What is your computer’s operating system? 

A. Windows XP 

B. Windows Vista 

C. Mac OS X 

D. Other 


3. what is the resolution of your computer monitor? 

A. 800x600 
B_ 1024x768 

C. 1280x1024 (or above) 

D. I don’t know 

4. How do you connect to the Internet? 

A. Dialup 

B. DSL 

C. Cable 

D. T1 or higher 


^ucstiohs will help us gc-t a bettev idea 
?士 the types o+ -tc^hhology OUV Visi-tovs use 
■to autss -the RP/V] /1/Iusi 匕 


5. What is your gender? 

A. Male 

B. Female 
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6. What is your age? 

A. 18 - 24 

B. 25 - 34 

C. 35 - 44 

D. 45 - 54 
E_ 55 - 64 
F. 65 + 


7. How many hours per week do you spend online? 

A. 0-5 

B. 6-10 

C. 11 -15 

D. 16 - 20 

E. 21 - 25 
F_ 26+ 


8. Do you purchase music online (downloadable or shrink-wrapped)? 

A. Yes 

B. No 

9. Please provide any other feedback about the new RPM Music site: 


1 about Mahon 


s. 


Dumb Questions 




Is there a limit to the number of open-ended questions I can include? 


Not really. Open-ended questions are a great way to get specific answers and feedback from your users. However, because 
there are no answer choices, they take more time to analyze and interpret and can sometimes be vague or not answered at all. 
Also keep in mind that these types of questions take longer to answer and require more commitment from your users. 
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rpm survey results 


The results are m! 

Let’s take a look and see how our users responded 
to the RPM Music online survey. 


browsers 


lewder 


Firefox 
Safari 10% 
Other 3% 


Explorer 

65% 

Male 


65% 

22% 


Female 

35% 



As Uewt ) 

E^plov-cv- is 七 he mos 七 
used bvowsev. 


Operating Systems 

Windows XP 
Windows Vista 10% 
Mac OS X 13% 

Other 2% 


75% 


Age 

18 - 24 


25 - 34 


32% 

30% 


35 - 44 22% 


45 - 54 12% 


_ - 64 4% 

65 and up 0% 


i>Z% RPM's users arc 

under That's a 

youy\^ 3udicir\C.c- 


Screen Resolution 

800x600 10% 


1024x768 


48% 


1280x1024 + 


38% 


Don't know 4% 


Internet Connection 

Dialup 12% 


DSL 


55% 


0 - 5 12% 


6-10 


21 % 


Hours per week spent online 

Looks like *tV)c RPM audichtc 
sfends a -fa'»\r b'i*t *time cm 
•tv^c Net cvev-y week, -too. That 
J means II be move savvy 
‘ about V^oy/ y/cbs*itcs y/o\rk *t^an 
•，- f v-csults V^ad skewed 

26 and over 4% 」 -boy/dv-dis lov/cv v/eekly houvs. 


11 - 15 


35% 


16 - 20 18% 


21 - 25 10% 



Po you purchase music online? 


Cable 27% 

Yes 


68% 

Tl or higher 6% 

No 

32% 


丁 k vcsul-b m *tW»s coW^y\ arc also 




^ wy -typ^al -pov- oi\\tr sites ar\d 
*tV)C |\r\*tc\nr\C*t 3S d whole. 
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listen to your users 


Responses to the open-ended question: 


ft. love the new site. It really reflects the vibe of the store. It would 
be really nice if I could buy digital tracks — ya know，like iTunes — 
instead of just getting the CD shipped to me. 



■ don’t really use the site that much. I’d rather just come into the 
store. I really like talking with the people who work there as well 
as other customers. I ciuess the site is ok — it looks good — I just 


guess 

won’t use it that much. 




The new site looks all crazy now. Parts of the pages don’t look like 
they're in the right place, and things don’t make sense. Can you 
fix this? I want to keep buying stuff from you guys, but it’s a little 
difficult with a messy site. 


，史 When I went to look at the site in Explorer，it looked all weird. The 
interface looks all out of whack... there are things that probably 
shouldn’t be where they are. 






Now that the results from the survey are in, start thinking about how all the 
information relates to each other. Finding patterns and connections can help shed 
some light on why RPM’s users are having trouble with the site. 
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rpm’s problems 


OK, looking at the results from the survey, it seems 
like our IE users are saying they're having the most 
trouble. Is there something wrong with the code? 


0 



Frank: Not necessarily. Browsers are the lens that you see the Web 
through—and not all browsers are created equally. 

Jim: Oh, is one “brand” better than another? Is that why a lot of the 
RPM users seem to be using Internet Explorer? 

Frank: No, actually. What I mean is that some of the browsers have 
peculiarities (in some cases, you might even call them bugs) that result in 
pages looking slightly different on one browser than they do on another. 

Jim: Oh, I see. And since we want all of our users to have the same 
experience regardless of what browser they have, we need to take the 
peculiarities of each browser into account when we’re designing the site... 

Frank: Exactly. This is where web standards come in (sort of). 

Jim: How so? 

Frank: Web standards are part of the big cross-browser compatibility 
picture. Because the W3C works collaboratively with browser developers 
(among other people and companies), web standards are (mostly) baked 
right into the browsers themselves. So when you design to web standards, 
you can be fairly confident that your site will look the same browser to 
browser. But some browsers have peculiarities — 

Jim: Bugs. 

Frank: Ok, bugs — that won’t display standards based XHTML and 
CSS the same way. 


Jim: Oh, I see. So what browser do we design for? 

Frank: Well, first off, you should always use standards compliant CSS 
and XHTML. That’ll solve a bunch of your problems right away. You 
should be intimately familiar with your users. What browsers do they 
use? 


Jim: We know that now. Most of them use IE and Firefox. 

Frank: Exactly. Design for those two browsers in particular. Finally, 
there are some code-based workarounds — you may have heard of them 
already, they’re also known as CSS “hacks” 一 that will help you bypass 
cross-browser computability problems (just like the ones the RPM Music 
site is experiencing). So we need to go look up some stats... 
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listen to your users 


Web Prowscr Usage 

(For the entire Internet) 


(h-tcirhc-t Explov-cv- y 
r^akes up hal-f o-f 
all v/cb bv-owsev-s. 




that it has some pmetty sev-ious buy 
that impact how i-t displays CSS. 


tWeiqre no ^ 

Dumb Questions 


What if I don’t have an easy way to find out what 
browsers my visitors are using? 

If you can’t get ahold of reliable browser statistics for 
your site, you can always use generic stats. 




Where can I get generic browser stats? 


There are lots of sources out there. Probably the 
most reliable are the statistics compiled by the W3C (www. 
w3schools.com/browsers/browsers_stats.asp). The thing 
you have to realize is that no web statistics are completely 
accurate, and they may not be reflective of your users. But in 
the absence of any other kind of data, this is a start. 


If I don’t have a specific browser on my computer, 
how do I test to make sure the design looks right? 

Good question. Not everyone has every browser on 
every operating system available for testing designs. The best 
thing to do is to check your site on all browsers available for 
your system. For example, if you’re using Windows XP, check 
your design on Internet Explorer and Firefox (available as a 
free download). This will be a good start and probably get you 
90% there. To check the rest of the browsers out there, use 
a service like Browsershots (http://browsershots.org), which 
will take screenshots of your site on every browser/operating 
system combination and then allow you to download the 
results. 


o 

裒 is 》 

Is 0 


Hu>J20ldx3-5£3IMl^ 


^°u>z 9 bJ0ldx3 
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internet explorer bugs 


Fix RPM's CSS bug by moving the 
hover property 

IE 6 doesn’t handle the : hover pseudo-property very well 
(actually, at all). We need to move our “active” class to the 
link tag instead of the list item and update our CSS file to 
apply the background to the correct element. 


IE6 only supports : hover ow link and anchor tags 
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listen to your users 



Fix the RPM site by moving the “active” class from the <li> tag to the <a> tag in the XHTML 
markup. Make sure you also update the CSS file to reflect your changes. 


O Open up the index.html file and 
move the “active” class in the 
navigation to the link tag. 


<li class="active "><a title="RPM Music home" 
href= M #">Home</a></li> 


<li><a title= M Music Store" href= M #">Music</a></li> 
<li><a title= n RPM Blog" href= M #">Blog</a></li> 
<li><a title= n More RPM Music" href= M # M >Etc</a></li> 


<li><a title="Shopping Cart" href= M #">Cart</a></li> 


❺ Open rpm.css and change the 
location of the : hover pseudo¬ 
property to the correct element. 


#nav ul li.active, #nav ul li : hover 
background: # 333 ; 



Launch the site in a browser and 
make sure everything looks as it 
should. If you’re running Internet 
Explorer 6, you should see that the 
hover now appears properly. 


Oy\C o( issues y/’rtVjt 

•tViat \i V^as some fretty y/ell - khoym 

b^s V^ov/ \i displays CSS. 




■m^r^ilnPfcJ Hfi 坪 naa r j Jwi 
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squashing ie bugs 


A 


Let’s take a look at the quick fix for the RPM : hover problem. 


ExeRciSe 

SotuiloH 


The XHTML 


广 


Pladc *tV>c adtivc t\ass i\\t l*mk 
-tag. Ko*t only is *tVis scma^titally 
dov*VCd*t> bu 七 rt >wo^*t r^css y/i 七 h |£ 心 . 


0 仏 eir pages as well. 


<li- 


_><a class="active " title= M RPM Music home" href="# M >Home</a></li> 


<li><a title= M Music Store" href="#">Music</a></li> 
<li><a title= M RPM Blog" href= M # M >Blog</a></li> 
<li><a title= M More RPM Music" href= M # M >Etc</a></li> 
<li><a title= M Shopping Cart" href= M #">Cart</a></li> 


Nice work! I think 
this is going to put an 
end to the frustrated 
emails from users. 


The CSS 


o 


o 





#nav ul a.active, #nav ul a : hover 
>ackground : #333; 


Both the active and hovcv 心 
shairc -the same ba^kgvouhd ^oU, 

thc y ih -the same ^ulc. 


Replace the <li> 
clement wi-tli -the <a> 

clement {jo ^ov-v-espohd 

with the we 

^adc ih the XWTML. 


so 
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listen to your users 


如 (Wt have _ 七 

vou V^avc a 

—6 七 Wo 吣嫌！ 

tcsti 吒 - 办兮’七 

a 七 七 _ duvm^ the 

dcs»^ ^>vo6CSS. - 


Wait, what about the emails 
from users who were having 
trouble finding info on the 
site... Surely you re not going to 
fix that with CSS, too? 


User Testing: Let your users tell you how 
they use your site. 

If you want to know how your audience is actually using 
your site, you need to do some user testing. User 
testing, also known as usability testing, lets you evaluate a 
website by testing it out on actual users. 

You’ll see where users go, which pages they spend the 
most time on, where they get confused, how they move 
from point A to point B on the site, and a lot more. User 
testing can identify known problems, locate unknown 
problems, and pinpoint usage patterns that could inform 
a redesign. 

But you don’t just have to watch users interacting with 
your site, you can give them tasks and evaluate how they 
accomplish each task. Always remember it’s the site 
you’re evaluating, not the user. This is important because 
you don’t want to give your participants (who are taking 
time out of their schedule to help you) the perception 
that you’re testing them. 
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usability testing 


I think we should have paid more attention 
to the people who are actually using the site. We 
need to go back and do some usability testing on 
the RPM site-and do it quickly. 



Frank: Good idea, Joe. We really should have baked usability 
testing right into our design process from the get go, but there’s no 
reason we can’t test the site after the fact. Usability testing’s a great 
way to figure it out a design problem because you’re looking at 
how actual users are using your site. 

Jim: Okay, I hate to rain on your parade, but testing sounds 
expensive... 

Joe: I have a friend who works in professional user testing. It’s big 
business, and her company doesn’t just do websites — they user test 
all kinds of products. But professional companies like that cost tens, 
even hundreds, of thousands of dollars. 

Jim: See that’s what I was afraid of. Why so much? 

Joe: They often have dedicated usability labs with computers 
that capture every keystroke and mouse movement, microphones 
that record every user comment, cameras that record the entire 
test, and even eye tracking devices that record where the user’s eye 
was focused at any given time. Plus, they’ve also got a horde of 
experts who can process all of the data from the tests and provide 
comprehensive reports and recommendations. 

Frank: That’s a bit out of our budget. Any chance your friend 
shared a few of her secrets, Joe?! 


Joe: Actually, she didn’t need to. Just because you don’t have a 
fancy lab doesn’t mean you can’t do useful usability testing. There 
are lots of budget-minded techniques we can use to test how real 
people use the RPM website. 


Frank: So she did share some secrets after all? 

Joe: Nope. All you really need to do your own usability testing is 
a solid plan, a computer, a few people to run the test and some 
willing participants. There’s even been some pretty impressive and 
inexpensive software — like Silverback, http://silverbackapp.com — 
that’s been coming onto the market recently. These applications 
can help you do some pretty sophisticated user testing without a 
crazy expensive lab. 

Frank: Great, then let’s get to it. RPM’s users are waiting... 
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listen to your users 



BE . 嫩 
Yourjol) is to play tire user and perform 
a task that would typically appear on 
a Standard usability test. Follow tire 

instructions below and write 
your impressions of the 
process in tire space below. 



r 一一 ■一 ■一 一一一 一 — 一 — 一 — 一一 — ■一一 ■一 一一 ■一一 一 — 一 一一 — 一 — 一 一一一 一一一 一一一 ■一 ■■■ 

■ Task #1: Using www.expedia.com, what would be the least expensive business class ticket 1 

! price for a single adult flying from Detroit (Ml) to Houston (TX), from any airport, departing on : 

■ November 1st in the morning and returning November 4th in the evening? 1 



Behind 
the Scenes 


P ‘七 


In a real usability test, you wouldn’t have to write down your 
thoughts or findings. Instead, you would just “think out loud,” 
and someone else would write down or record what you said. 
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build a good usability test 


BE 脱 i s©Iuf|©n 

Yourjol) is to play tire user and perform 
a task that would typically appear on 
a Standard usability test. Follow tire 

instructions below and write 
your impressions of the 
process in tiie space below. 





Y°^ get 

di-Pfcirch-t results, but 
"these should be £.l< 


lose. 


Task #1: Using www.expedia.com, what would be the least expensive business class ticket 
price for a single adult flying from Detroit (Ml) to Houston (TX), from any airport, departing on 
November 1st in the morning and returning November 4th in the evening? 



Sclcd-tmj dates a^d *ti^CS -for -the -flijlvt V/9S f\rc*t*ty s*braij^*bfory/ard. The 
u Mo\rr\ w dhd of*tior\s should be d*b *boj> o-f 七 he drofdowh lis*t- l-f 
you do^*t khow *the aivj>o\rt) Bredis asks you -to dKoose o^e- Tha*t 

pav-ti^ular sdvcch is Crowded dhd *the w subnr\i*t” bu*t*toh is hard to -f md. 
Sy/i*t^K*mg -from Edohomy *bo Business dldss y/ds easy, bu*t *th3*t option should 


(. 

lAfe V^ad ^cjativc av\d 
c^cv"icir\£-cs y/Vtii 
site. Pitkmj tVic <fr+*b was 
s-bv-aij^-t-fov-y/av-d) but ofb’cm 
SY/iUWi% became d ^oblcm. 


………………. 、 ……………" 

Sorwctimcs 七 he \Y\{,Cr^Ct v/ov-ks 
well bu-t sorwethmj is miss'm^ oy 
-Peels oui o( o\rdcv. 
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listen to your users 


Plan: You ve got to have a plan. What are your goals (what do you want 
to accomplish with the usability test)? How are you going to accomplish 
those goals? What are your tasks going to be? Who are you going to 
recruit to be your participants? If you don’t have a solid plan, your 
usability test will be a mess from the get go. 

Moderator Script: A moderator script is basically the script for the 
entire usability test. How it will run, what the tasks are, and what needs 
to be told to the participants. 

Moderator: The moderator is the person who runs the usability test. 
They talk to the participant, tell them what they need to do, and give 
them clarification if they need it. 

Note Taker: The note taker is the person who records what the user 
does, what they say, etc. They basically collect the data that will be 
analyzed after the test is finished. 

Computer: You’ll need a computer with an internet connection and 
necessary software for the test (browsers, plugins, etc.). 


Space: You need somewhere to run the test. If you don’t have a lab, 
this could be your office, a quite coffee shop or even the corner of a 
local library. 


Participants: You need someone to actually participate in the test. 
The more people the better. These participants should be drawn from 
your audience. It won’t do you any good to select participants who 
would never use your site. You also need to compensate participants 
give them something for their time. This may be cash (S50 is not 
uncommon for an approximately 3 hour session) or a gift certificate 
from somewhere (everyone loves Amazon). 



The building blocks of budget usability testing 

So what exactly do you need to do a decent usability test on a 
budget? Here are the basics: 
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moderator scripts 


Use a moderator script to organize the test 


If you want to get the best results from your user test, you need to 
make sure you’re well organized and that the test runs smoothly. That 
means knowing the exact sequence in which everything happens, what 
you’re going to say to the participants, and what tasks you’re going to 
have them perform — and that’s what’s in a moderator script. 


JV^era 树 ^crlfts 

JlssecfeJ 




30 minutes - Instructions and pre-study questions 
1 hour - Usability test and task assignments 
15 min - Post-study questions and participant Q&A 


A schedule will keep you 

av\d make suire the 七《七 
浐 Uhs 岛 smoo-thly as possible. 


? orU 7 减 



Study Overview 


v 


Thank you for agreeing to participate in our study. We’re very interested in your feedback about booking 
air travel online. We’re trying to understand how people interact with multiple air travel websites during 

typical scenarios. 

In this session, we’ll first discuss why and how you use the Internet in your daily life and how you might 
use air travel websites in particular. Then Til ask you to complete one task scenario on two air travel 
websites, dealing with looking up airfare prices for a specific destination. 

As you 5 re completing the scenarios, please speak aloud to let me know what you are doing. Fll also ask 
you to point out anything you encounter that’s unexpected or surprising. When you’ve completedthe 
scenarios, I 5 11 ask you a series of questions about the websites and how you interacted with them. I en, 
Fll ask you some questions after you have filled out a brief feedback questionnaire. 

Remember that this is an evaluation of the website’s ease of use and not of your individual performance. 
Do you have any questions at this point? 
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listen to your users 


background Interview 

A background interview provides information about the participant’s general internet usage as well 
their experience with the kind of site that’s being tested. So, questions would include: 

• What time(s) of day do you tend to use the Internet? 

• What types of work or school-related activities do you perform using the Internet? 

• What are the main issues you have when you visit websites in general? 

• What is a scenario in which you might use a website like the one being tested? 


as 


'JV-ouhd ihtc\rvicw 
With you\r pay-tuiipah-b bc-fov-c, 

you V-Uh the test. 


Task Instructions 

These are the tasks that the user will perform, which you will observe them complete and record what 
they do. The tasks you come up with are the “test” portion of a usability test. 


^Sharpen your pencil 


Think of some user tasks for the RPM Music site that a typical user 
might go through. Write your tasks below. 


o 

e 

o 
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moderator script fas/cs 


^Sharpen your pencil 
k Solutian 


Let’s take a look at some possible tasks (that a typical music site user 
might do), which you can use for your RPM Music usability test. 


分？ doh*t3d*t ih-fo\rma-tioh 3hd di\rcd*tiohS -fco RPA1 Alusid 

** 豪**■•參■參•拳 _舉* ••參 ••• •參*••參 •參 # #, #e 

❺ •PK ih? • MM . 4 .ih!? • .^aWcd ar-tist 

•肇 ••籲••參 _ ，.奉，參籲 參,,_籲 ■參 ■奉籲籲參籲參奉參耱參公的 

❺ P^. a 3°: s .tti-b 3h o\rdc\r wi*th 

RP/W Alusid f*tcs*t p3VmCh*t ih*fo\rnr\a*tioh v/ill be Provided) 

* 春** ****** ■攀* ■攀參 •參••馨參參拳 ■••••• 參<*«##** I 


Make su\rc *b^c tasks you 
-fotus exclusively cm erne sttk\ov\ ok xiic site 
ovohe Mature. Variety V«ll \^oMt 

•bV^c wults c^P tV^c -test 


These ^ucs*tio 灼 s Co^cr *thc 

pa\rti^ipa^Vs c^fcv-ic^dc du\r*mg *thc 

*tcs*t a 灼 d *thci\r op'mio^s dbou*t the 
si*tc *m ^ucs*tioir». 



Post-study Questions 

Post-study questions are designed to get the participants overall impressions of the site (or sites) being 
tested. Questions could include the following: 

• To what extent did the content of the website meet your expectations: 

Not at all A Little Neutral Somewhat met 


• Overall, how easy was it to understand the organization of the website’s screens, especially the menu 
levels and the flow of the screens? 

Very difficult rHUt Neutral Easy Very Easy 
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listen to your users 


MOnERAIOll SCRIPT COIXSIRIJCIIOIX 1 



Now that you’ve got all the parts of your moderator script, put it all together in a document. 
Fill in any missing pieces, and you should be good to go. 



丁 his may sccrr» Uhimpovtaht but 
whch y/C say rhodc\ra*to\r wc 

cvc\rythihg. 


❶ 

❺ 

❺ 

❹ 

❺ 


Write a quick schedule and study overview that includes what you’re 
going to say to your participants about the test 


Write a quick background interview to find out a little more about your 
participants. 



Come up with some tasks that you think might help you solve some of the 
site’s problems. 


Finish up the script with some post-study questions that tie the user test 
together and get some final thoughts from the participant. 


Gather and have ready any consent forms you may need for the test. 


❶ 

❺ 

❺ 

❹ 

❺ 
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rpm’s moderator script 


r 


MOnERAIOR SCRIPT COIXSTIUJCIIOIX 1 SOLUTION 

Let’s take a look at what your RPM Music usability test moderator script might look like. 


SCHEDULE 

ZO mmu-tcs - l^stvu^io^s a^d pve 一 study ^cstioirvs 

I V)ouV — Usdbilrty "tcs*b 3 irvd *tdsk dssiyvrr^irrts 
|5 mm — Posi-s-tudy <\UCS-tioirvS airvd pavtitipairrt ^ 5 fA 



Make sure youVc s-tay'mj oy \ "tv-adk 
釙 dUo 七 wastmj Y ouv " 心 1 ⑼如 time. 


STUPV OVERVIEW 

Tharvk you U ayreo^ io Yarhc^ait m ouv- study. VVc art v^y mWcsicd *m obta*m*m 3 
-feedback abou-t i\\t RP/H /Husid. y/cbsi-tc airvd oirvlmc stove. 

U -tv^is usev -test you Will be asked *to a series -tasks oir> -the RP/H /Hu 仏 v/ebs •心 

七 V>a 七 v/ilU 外 us evaluate tU\c\tu^ a^d usabiliiy ihc siic. ihc task ^hors 
-test, you v/ill be asked -to a slio\rt survey abou-t ilic site a^d youv- e 平 

us.^3 -the cmlme stove. Wile iaki^ i\\t itsi, please be sure -to “*tWk ou 七 loud%。 i\^ai ouv 
modev-ators 代 tord yo 讲 rtacho^s bo iV>c tasks. Fnr>ally, *b^c modwt^s VilUo 七 be able to 
assist ov speak v/i-th you out ics-t s-tavts. Po you liavc av>Y 'udems a*t this *bme? 

Wsc this sd\ript so you 
do” 七 -Povget "to tell youv 

3AC^R0UhlV IhITBRVIBW ^ht\ya^i so^iw^. 

A badyo 一 mWvicv/ pv-ovidcs m^>v^a 七 icm about 〜七叫 airv 仏 3 ⑼吖 al i 士作 d ： usay, as 

^11 as 叫饮•心以 v/i 七 h ^ kmd d si 七 e 桄 a 七 is bc*m 3 itsied- So, ^st*.oir»s v/ould \uWdt ： 

@ l/Vha*b *bimc(s) c^f day do you -tc^d *to use i\\t k*tcvir>c-t? 

@ types <^P y/ovk ov sAool -代 la*bed adtivi-tics do you pcir-Povm us*m^ -the |h*tc\nr»c-t? 

@ ^3*t 3v*c *tV>C mdirv issues you li3vc ^i\\cy\ you visi*t v/cbsi*bcs ih ^c^cv^l? 

@ lV^a*t is a sCcy\^\o \y\ >n\\\c\\ you 州吵七 use a v/cbsi-tc like *thc o^c bc'm^ -tes-ted? 

3as*id -tc^n^al m-Po\rma*tioir\ 


L 
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T^sk |hS*t\rud*tiohS 

@ LoCS'ie "the doh*t3d*t ih-fo\rnr»a*tioh 3hd di\rcd*tiohS *to RPA1 Alusid 
@ Pmd the h3mc of 七 his moh 七 h’s -fea-tuved 狀七 is 七 

® *fo\r Chicago’s ^taicsi Hi-b ahd plade ah order with R?M Musid (iesi 

paymch*t ih-fo\rma*tioh v/ill be provided) 

ywo "to th\rcc tasks is Chough-you^ 

Post-study ^uestio^s ⑽ haVC P，adCS ^ bc * 

@ v/ha 七 C>c*tch*t did *tKc doh"tch*t o-f *thc \wcbsi*tc mcc*t you\r CX.pCd*t3*tiohS? 

七 3 七』 A Little Neu'bral Somev/hat me 七 Very mudh so 


® how easy was \i h> uhd 饮 sUd o^z3ho^ o( the y/cbsitc^s sdv-cchs, especially 

the mchu levels ahd the -flow of the sdrcchs? 


Vcv-y dididul 七 


Di*Pfidul*t 


Neutral Easy Very Easy 


o 


O 


Great, Ive got a moderator 
script. But what exactly do 
I do with it? Don't I need 
someone to actually interview? 


J 
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testing with friends and family 



ExesciSe 


Remember the Expedia task you did earlier in the chapter? Now it’s your turn to have a friend 
or family member perform the task, so you can get a taste of what it’s like to be the moderator. 
Make sure you have them speak out loud and record your observations below. 


r ■圓 ■圆圓 ■一 ■圓 ■■圆 ■圆 ■圓 ■圆 ■圆圓 ■■圓圓 ■圓圓 ■圆 ■一 ■■圆 ■匪 ■圆 ■圆 ■國 ■圆圓 ■■■■« 

■ Task #1: Using www.expedia.com, what would be the least expensive business class ticket ■ 

I price for a single adult flying from Detroit (Ml) to Houston (TX), from any airport, departing on \ 

■ November 1st in the morning and returning November 4th in the evening? 1 

L 一 ■一一 一一一 一一一 ■一 ■一 一一 ■一 ■一 ■一 一一 一一一 一一一 一一一 ■一 ■一 一一一 一一一 ■一圃 ___J 




358 


Chapter 9 


















listen to your users 


Friends and family can be a problem 


When you’re doing usability testing on a small budget, you’re 
probably thinking that it would be easy to grab some friends or family 
and have them do the test. And you might also be thinking that you 
could persuade them to skip the compensation (because they are 
friends and family, y’know). The problem is that when you use friends 
and family for a usability test, you introduce bias into your study. 

Because they’re close to you, they might not be willing (either 
consciously or unconsciously) to give you unbiased feedback. Also, 
when you’re choosing your participants, you need to choose people 
who would actually use the site. It’s more than likely that the people 
close to you aren’t part of the intended audience of the site, and, 
therefore, if you choose them, you may not get the results you need. 



pvobaWv a ^ood 


•,dca bo ^ 7 ouyr wOW 


thereicire no o 

Dumb Questi9ns 


How many participants do I need for a user test? 

The more participants you get, the better (and more representative) your results 
will be. If you only have one or two participants, you’re really only testing it on them. 
The results won’t be representative of a large population; they’ll just be their own 
opinions. 

No, really, how many participants do I need? 

There’s no real right answer for that question. The more the better. But, generally 
speaking, you should shoot for a minimum of 8-10. 

What if I can’t recruit that many participants? Should I just avoid the user 
test entirely? 


A ： 


No, even a usability test with a small number of people (or even one) is beneficial. 
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The results of the usability test - what the 
users are telling you 


I*m confused. 

Why doiVt you have a 
contact section? You have 
a whole page about the 
company but never tell me 
where you are. 


Overall, I thought the site 
was ok... I had a hard time finding 
the contact information-it took 
me forever! Who puts contact 

information under an etc link? 


Some pos’rtwc -fccdbdtk ov\ 

love 


|/scV"S y/iio "t 七 

fVe look'mj -fo\r f\robakly 
£.ow>c b^C-k- 


The design is nice, and I 
think ifs a huge improvement 
over the old site. I especially 
like the blog-ifs cool to hear 
what you guys are up to. 


I just kept on 
getting lost. And 、、 etc〃? 
What is up with that? 


The new design rocks. I 
still wish you could purchase 
music digitally, though. 
Shrinkwrap was so 1999. 
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A simple problem 


Looks like our users are a little confused by the navigation menu. 
They’re having trouble finding the contact information because 
it’s buried below a nav item that’s incredibly confusing. This 
should be an easy fix... 





RFM Musto 


The vcs-t o( ihc ^avigaiio^ seems 
"to be gcitmj uscv-s {jo whai 
七 hey a\rc look'm^ -fov-. 
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adjust the rpm navigation 





Tost DriVq 

One simple fix later... 


<ul> 

<li><a class= M active" title= M RPM Music home" href="# n >Home</a></li> 
<li><a title= M Music Store" href="# n >Music</a></li> 

<li><a title="RPM Blog" href="# M >Blog</a></li> 

<liXa title= M More RPM Music" href= n #">About</aX/li> 


<li><a title= M Shopping Cart" href= M # M >Cart</a></li> 


</ul> 




RPM MuSte 


New at RPM Muic 


At ths Party wati H&ctor H'm 

Nw Upon! 

I9H AT SbrAAig tha| 

tmm yau oviang Jil f\fV\i H^a imib i4rfi! 
Irr^iur ㈣ Nubian 


MW WtW 七 ^ cw 
七 _ dl'»6k I'mk. 




> 'Q.r 


— ! - 




I can’t believe how incredibly 
easy that fix was. And we found 
the problem by conducting the 
usability tests and listening to the 
users. More power to the users! 


\MWi 


Hawaii with a Bango 
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ytyr iPtfiua Hht TTw Mawtf ma ih4H>A i «i 

iariigtfdyl 1 Uihllnl 咖 al 11 Onx mmc 1w ih#wtid#1arTtf^. 


nlD 


Dc .1 rK*iM3 padOQA In • 

rt'jrafuk^-luJI Clhrli^rnK dbjinsi K"iaE bo 

pfiginri«dfn Jipppi Wp etd ^urrqnlly nwqs^^t^ 
wli^ra btk! ! BVBJyihlnp drodhi cpljI. wo " haM- j 
py wiu QfiillB 

Milfoil 

Ofcl T * Ni 1 ^ 
nipIlE EkltCk 
ihwnf. 
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RPM Myaio 





New at RPM MusJc 



At mo Party witu Hector RFV&ra 

hloctof Flvp'i^lfH]k:>ngof Wrw Y 的 Lpbn$oi,#rq ， ^miivs-a 坤 _iwrlh hfs 
I9M p#bhAi tfmParty. G»Tnbog rrlDlfifl FHiD TdpJD 1 . Itvadarai- atbun^wlll 

hmt rsu 冇 4 m I eng maiH urt» of il^TflMprfTt fKc^es 

In ^qiur ㈣ Nv^ion 


Hawaii wrth a Bongo B«dt 

Lefkiv Mrtm & has- dDnis IL 和 an wrlh< \fn tfbum 

h Jindi^w fifhH couftlry. sRcfcup iLhli record，d lirtm 
HBiia lll« "Tl» Wswtf ina ih* 

aftllgniiyl 1 MihJJnl Gn« mmcAct ih#whd*1am^. 


Eo Utefou bdt tellw bl« 
yflilf wp^S S4At 



Nw4 RPM Ic snaring uplor iha rmlr 
ilpcfclng up cm _拿切 woixlifor 1 h* pckvl 
LP :n«^. _ihffijl|l bo nus#] wflli Inw-I^r r end m 
9 PJ3^»c1 \hMt wn II 勹 m lofna-cocpi rw x^uwt^lu 

■MDufAi lastr In iht nw:n, Ch«k iwife- 1 ! 

ru^iEU^ 1 RPM mUTrKl 

□c.1 kVa juio rK«iiwa i.m|finAriDi^ ruckfig« 
■vwihiiu»1u』l □hf^i^rTUA dlumsi tfiaE to 
pflqpnMfdfn Jnn. Wp etd turpprlly (r 
-Drtgim and >1 wv^lhlni^ diodu ctjL wq U hp^A 怖 

,Cfiyld MihiatiiABflol rt RPM 


KB ?3f py^SIAU, 

bklKnl 


1 1 
niDlH Fbt 


Nah 

Oufti 


Jifi Up Cfi a\ IFUiSiDA M Df IM 

Ea chAOcoul IIm LPsIhii: offer IVru 


Site stats give your users (another) voice 

Site statistics are a handy way to find out more about what your users 
are doing~which pages they’re hitting (and how often), which are their 
favorite pages, where they’re coming from (referrers), and what searches 
they might be running while they’re on the site. 

You can get at your site statistics by using an application (either on your 
server or on another server) that captures, measures, and reports all sorts 
of information on your site’s traffic. This process is often also called 
website analytics. Whatever name you use, website statistics or analytics, 
it’s a great way to get information about how your site’s being used by 
your audience. Let’s see how RPM’s stats are looking. 
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web statistics 


Website analytics tools 


Mint 

Mint (http://haveamint.com/) is a cool little application created by the legendary web 
designer/developer Shaun Inman (www.shauninman.com/) that sits on your web server 
and captures traffic data — which is then displayed in Mint’s customizable dashboard. 
The great thing about Mint is it can be extended by plugins called Peppers. These 
Pepper plugins and widgets (which are available at the Pepper Mill 
http://haveamint.com/pepper mill/) are developed by all sorts of people all over the 
web and will work seamlessly with your Mint install. 


MU oy,l7 tests j 卿 

s -^c 70U mstall 



Google Analytics 

Google Analytics (http:/ / analytics.google.com) is a free service offered by Google 
that generates detailed statistics about the visitors to a website. Although Google 
Analytics can provide detailed information about page views, referrers, browser 
versions, etc., it’s geared more towards marketers than designers or developers. 

Google Analytics works based on a system called “page tagging,” in which a little 
bit of Javascript is inserted into every page on the site. Every time that page loads, 
the JavaScript collects anonymous visitor data, sends it back to 
the Google mothership for processing, and then displays it in a 
handy dandy dashboard format (at the Google Analytics site). 


google is -Pv-cc and 

has ycat daia visualization 

like Ime arui ba\r gv-aphs. 
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the data is convincing 



garpen your peno 


What do the 刀 PM site stats tell us about usage patterns? Let's 
hQJv rD a look. 
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Ok, youVe convinced me.ODringing 
in the site statistics really clinched 
it for me.>nd on top of that 、 I-m not 
getting any more angry emails from 
customers. 广 ooks like your fix did the 
trick. Nice work! 
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listen to your users 


Your Web design Toolbox 

You’ve got Chapter 9 under 
your belt，and now you’ve 
added usability testing to your 
tool box. Usable sites down; next 
up: evolving your sites to the next level. 



% 


BULLET POINTS 


■ Surveys are great for collecting information on 
a broad range of topics from a large number of 
people. 

■ Survey questions should be unbiased and 
uncomplicated. 

■ Open-ended questions are designed to provide 
qualitative data, but they can be complicated 
to deal with because each response will be 
different, and you won’t be given the same kind 
of nice, statistical (numerical) results that you’d 
get with other kinds of questions. 

■ Some browsers have peculiarities that make 
a website look slightly different from how you 
designed it. 

■ If you design with web standards, you’ll avoid 
most cross browser compatibility problems. 

■ Usability testing is designed to evaluate how 
real people use your site. 


■ 


■ 


■ 


■ 


■ 


Usability testing can be done cheaply. 

A usability test is task-based—you ask your 
participants to perform a task and you evaluate 
how they accomplish it. 

A moderator script is the blueprint fora usability 
test. 

Recruiting friends and family to do your usability 
test can introduce bias into your study and 
impact the reliability of your results. 

Site statistics (site analytics) provide usage 
data about your website, such as page views, 
referrers, popular pages, and browsers. 


CHAPTER 9 
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10 evolutionary design 



So you’ve built a bunch of awesome websites. 

Now it’s time to kick back, relax, and watch the visitor numbers grow, 
right? Whoa, not so fast. The Web never stops evolving —— and your 
site needs to keep up. You can add new features, tweak the design, 
or even do a complete redesign. An ever-changing site reflects your 
growing skills — which means your site is always your best PR tool. 


this is a new chapter 
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your portfolio 


Your portfolio so far... 

That’s a good-looking collection of sites you’ve 
got there. Take a moment to look over them and 



Audio-l-^o site 
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But although it’s beautiful，you 
can’t sit around admiring your 
portfolio all day. There’s always 


more work to be done... 
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fresh content 


Keeping your site awd cowtcwt fresh 
keeps your users coming back 

If you’re a web designer (either individually or as part of a larger studio), 
your site is your own best PR. It doesn’t just showcase your project work, 
but it also highlights your skills, aesthetic, and design sensibilities. So you 
need to make sure that your site always represents your best and most 
progressive work. 


This also means that you can’t let your site linger with the same content 
(and features) for too long. A site that remains unchanged sends a 
message to your users. It says “Hey, I haven’t changed in forever; there 
must be something wrong with the company.” Fresh content will sent a 
positive message to your users and keep them coming back. 

Revisting Red Lantern 

Red Lantern’s doing great. Working with Jane, you’ve got some 
truly impressive projects under your belt, and you’ve helped 
establish Red Lantern’s reputation for being an innovative and 
cutting edge design studio. But to keep that reputation intact, 
you need to make sure the Red Lantern site’s up-to-date, too. 

Now’s the perfect time go back and revamp. 


Red lantern To - Po List... 


Freshen up the look and feel of the site. 

Make the site more cross-browser compatible. 
Get better user feedback. 


Communicate better with users. 


Keeping Red Lantern^ site 
current should be no trouble with 
your web design skills, and I’ve 
brought in a junior graphic designer 
to help out. 
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Sharpen your pencil 


The new graphic designer at Red Lantern has been hard at work on a 
couple of update ideas for the site. What do you think of them? 

We’ve left space for you to make notes on the pros and cons of each below. 



Rfd UnUf a 





Welcome to the New 



Hu ■. ihi HFll > SV B T"^i l l l 


NB LE' 




mm 






Pros 


Cons 


Pros 



„ Ip _■ . " B ' .1 H 



Cons 
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pros and cons 


Sharpen your pencil 

Solution 




What did you think of the graphic designer's ideas for the Red Lantern site? 
Are there elements of one (or both) you could use in a redesign? 


| A ， ！*> 






Rfd L^nt^rn Dffign 

mm- ftwfn v 

M ffiVi 



Welcome to the New 






Pros Retails -the site’s ov-i^mal 七 heme. 


The lojo-typc^s updated. 


Clearer all-ay；ouhdi layout bu*t *thc 

arc subtle. |*t’s 的。七 *boo obviously a vcdcsi^h. 


Cons Does i 七 look too similar? 

The portfolio lists *the sarme sites as bc-forc. 


The header’s -the sa^e. 



‘ ■ it 



'W 


Pros Tabs .hishl'shi. .ih?. 
Clearer all-around layou-t- 
Ufdaicd lojotypc. 


Cons Thcy-c^s too li'ttlc doh*tv*oist between 

■the bddk^\rouhd dhd maih dorrterrt. 

Similar header ima^e* 

Desi^h looks bland. 
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Posrtio^mj 七 he 

ovc\r -the 
headev- ima^e 
dv-aws a-ttc^-tio^ 
bo i-t, bu-t subtly, 
i\Y\Cc 'the ima^e is 
^Ortty\tA a^d s-till 
visible behmd. 


* 0 ^ 




飞 1 ' | ^H | i 

必 - 


fled Lantern Design 

hem pnlloto ccrtB 



Subtle \rouhdcd 
^o\rhc\rs ai the 
"top of the pa^e. 


TWis dcs'i^ 5»vcs a 

lav-jev- section Jc 
■biic page b> 七 
mdm 6 oir\*tcy\*b- 



A sihjlc 匕 olurrm 
tct*tcv~ Ki^Kii^K'^s 
"the si-fces ih the 
Poir-t-folio s\y\C，c 
ca^h o-p them 
now hds mov*c 
whitespa^ -to the 

Ic-Pt 3 hd Hght 



Web design is about evolution, wot^cvolutiow 


Jane’s right. Changing your site radically every three or four months can be 
problematic. First off, if you’re doing client work, a complete overhaul of your site’s 
design three or four times a year is going to suck up an amazing amount of time and 
resources — resources that would be better used on client projects. 

Second, your users are comfortable with your existing site. They’re used to the way 
the site looks and changing it radically could confuse them. So how do you keep them 
interested and coming back for more? You can take an evolutionary design approach to 
updating your site, incrementally changing the design aesthetic and features. This way, 
your site will still feel familiar to your users, but it will also be new and fresh. 
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change up your designs with css 


Use CSS to evolve your site's design 

The great thing about designing with web standards is that when you want 
to change up your site’s design, all you need to do is edit the CSS. You don’t 
have to worry about your markup at all (which is one of the benefits of 
designing to web standards — separation of content and style). 



Small updates to the HTML file 



Ov'ijmal 

❻ 


index.html 



Make a copy of the original CSS 
file and link it up in the HTML 
document. This way, you can 
always revert back to the original 
CSS file. 




screen new.css 



Make changes to the new 
CSS and republish site. 
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fjont ExGRdSe 


Now that Jane’s settled on a new design for the Red Lantern site, it’s time to get to work 
revising and editing the site’s CSS and markup. 


o Open up the current Red Lantern site files, copy the main CSS file and 
rename it to something different. Now you can change the page style 
without affecting the original design. 





/stylesheets 



will Ud 

UC ° ld i-fbe. 


screen new.css 


Make suve *tV\a*b 7 ou 

ov'i^mdl vcvs'«ovx o^r 
恤 CSS We. 



screen.css 


► Continues on tire next pa 贫 e. 
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updating the red lantern site 



The only changes you need to make to the markup are linking the new 
(copied) stylesheet and removing the header image from the HTML (well 
use CSS to add it back later). 


Add ihc new siylcshcci b> ihc 

XttTML Because rt’s a 灼 

6opy of 七 he ovij'mal ； \i will 
look the same bui will ad as -the 
-fvarwcwov-k -Pov- -the 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN n 

"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict•dtd M > 

<html xmlns="http: / /www.w3.org/1999/xhtml" xml : lang= M en n lang= M en M > 

<head> 

<title>Red Lantern Design</title> 

<meta http-equiv= n Content-Type" content= M text/html; charset=utf-8" / > 

^ n v … i 卞 _i n nl I I " 111 I f " m mm I I I II " I I n I | … "m 1 i i " 





<link rel="stylesheet" href="/css/screen—new.css n type="text/css" 
media="screen" /> 

</head> J-i . i . ^ Wt tW»s 

,s all one I'mc m V«lc- 


<body> 


Update ihc lo^o. 


<div id= M masthead n > 

<hl><iiuy LcUieuTT^^ 1 ©^^ 






<hlximg alt="Red Lantern logo" src= n images/rl 一 logo— updated.png" 

/x/hl> 

<ul id= n nav"> 

<li><a class="active" title= M Red Lantern home" href="index. 

html n >Home</a></li> 

<li><a title="Design services" href="services.html">Services</a></ 


li> 


li> 


<li><a title= M Our work" href= M portfolio.html M >Portfolio</a></li> 
<li><a title= M Contact Red Lantern" href="contact.html">Contact</a></ 


</ul> 

</div> 

<div id= M wrap M > 

<div id="header"> 

mg n 1 n1~yn Ini i 1 i i ng ： 




. /> 


<hlXstrong>Red Lantern< / strong> builds unique interfaces 
<span class= n amp">&amp;</span> user experiences for the web.</hl> 

</div> a 

V Remove <’•”>〜(& ^ad^s 

bddk^o^d imay v/ill move *to 七 he 

up #V)cadcv <V^I> taj also. 
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© Update the new CSS file to reflect the following changes. The code you 
need to change is on the next page. 


Update the logotype -fov 

Red 


Add a subtle v-ouy\dcd tov^cv 

-to i\\t layou-t ay\d 4 吵七 

dv-of shadow *to sc^av-a*tc 
栋 c md'm layout i\\t 
katkyou^d. 


\ ■ 

nfyry 




• V c ■： ， 

i _ 





Move *tV>c i^cadcv- 
*fv-om 七 he 

body b> a <dw> *m 
*tV>c headev- imay. 


Red Lantern Design 


Luniam bulda uniqiM ： 
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f irtnfaM ■ 


Lft ■麗 
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Welcome to the New 
Red Lantern 

袖 Ljrilornlca Dmafe v«b bid Um ^ 

liiiKUcwu^ dtfiQn .nu oc^rispr 奶 gy 脚 _ w cud 

a fc 


Q\m WtHfK 


bc-ouiii^l Hrcli^dr^i Wid 

f _ -014 WIKWV 

p^rfowoi iiMoriiiiq piroc>] i^ii 

_ h-iyinnc| Bhgn 择 1 pld 
i !lr< wrvmin arr\ HkiU Sriirsi 


4\mtrikt^^h 
I ivid mMkuw^ 户 f 
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S4 職 fl PWO O^Tyi 

pW _t 4 cnJ^ _ Ptfi wrda ■ 


4 


,Uc *^ C 

糸。々二 

口 : tw. 


■ li 

■i i Ww 


Rcov-ja^iz^ i\\c Columns *to a 
2 _/^ — l/?> sdp and make *bV^c 
povt*folio m*bo d list. 


You’re not done yet, flip the page. 



you are here ► 


379 




























adjust red lantern^ css 



Add new rules to screen_new.css so the Red Lantern site matches 
the comps from the graphic designer. (We crossed out the old 
rules; you just need to add the new ones.) 


^masthead { 

margin : 0 auto; 
margin-top : 20px; 
width : 800px; 
color : # f f f; 


#nav 


float : right; 




^ n 


17 n + 0 ! 




font-size : 1.4em, 


#wrap 


clear : both; 

margin : 0 auto; 

padding : lOpx; 

width : 780px; 

background : # f f f; 

border : lOpx solid #5c0505 


]□ QinolGl^ 






#header 


^header hi 


font-size : 2em, 




顿 Dll 0 0 


n 




I lQpn; 


i oonteg, 


丁 he ^r^as-thcad \rulc is v/hc\rc wc heed 
"the \rouhdcd do\rhCV" 


Because lo^o imay V>as 
Io\a i\ttA *to adjust r\3v lis*t so 
Vs fos'itioncd fv-opcv-ly. 


This is you Y\tt& *to 3dd mam 

ima^e removed *fv-om *tV>c hcadcv*. 

T\\tv\ i\)t <Kl> cav\ be \rCfos*itior>cd *to 
ma*tdV> 七 he Ats\yr\trs domf. 






L ' 


1 n j 1 mr 1 r ij ij i f M i 
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一 _ _ J 卄心 Hw [ - 


TV>C toU 衫於 a^W^-t 
so Y ou ^ tt( ^ *^° k 七 ^ s ^ C ’ 


^content 



#sidebar 


1 ：i f 1;^ 


Tlie ^^Oh'tch't dhd ^sidcb^v 
vul« will position the 
^spc^tivc <div>s. 



background : #eee; 

} 

#sidebar h2 { 

font-weight : bold; 

lac r ol a— 


.d 卄 oo 科 


TLLcL L y 丄丄丄 • KJ 


—€ lQ|hi; 0 ) 


【pQgMiill 




Style 

%°9 


七 k <hZ> *to ma*tdV> *tV>c 
yaphy m 七 lie domf. 



#port li 






#port li img 


V 


The pov-t-folio images v/i|| 
y\tcd sorwe adjuslrw^vt. How 
do 七 hey look m 七 he dorwp? 
I/Vha 七 ’s di-P-Pcv-c^t? 
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red lantern^ new css 



ExeRciSe 
SoLytioH 


Let’s take a look at the changes you made to the Red Lantern CSS file. Remember, 
rules that were not changed or removed can just be left the same as the old site. 


Lc-f*t side of .^i-f 

( 七 his is a I 。灼 3 imay WrtV> vou 灼 ded 

#masthead { dovy>cvs or\ bo*th Cir>ds). 

margin : 0 auto; 
margin-top: 20px; 
width : 800px; 
color : # f f f; 




height : 7 Opx; 

background : url ( 丨 ../images/rounded 一 header•gif') no-repeat bottom; 

} 一 

#nav { ’T. 

Addmg a height a^d b^lcyro^d 

wc dah give -the dov-hevs a simple 
^rouhded look. 


float : right; 

margin : 0 lOpx 0 0; 
padding : 3Opx 000; 

font-size : 1.4 em; 


#wrap 


clear : both; 
margin : 0 auto; 
padding : lOpx; 
width : 78Opx; 
background : # f f f ; 
border : lOpx solid #5c0505; 
border-top : none 


P'id you yt t^'is on? Because #mast^cad 

V^as a batkyound you v\ttd *to vemove^ 
*top bov-dev- -from <dW>. 


#header 



height : 180px; 

background : url('../images/tokyo— updated.jpg') no-repeat; 
border : lOpx solid #eee; 

} 

#header hi { 


(n/oy/ ma'm -f ile is y\o 

lo 哼 v Kav-ddodcd *m*fco *tV>c HTML 
you use a v>c>w imay 3s -the <VJ> 

badkyou^d m CSS -file- 


font-size : 2em; 
line - height: 1.2em; 
padding : 2Opx; 
color : #eee; 
width : 200px; 



font-weight : normal; 


TVis lets you keep the 
serwahtids o-p the <hl> -{^0 

but make the text appear as 
though i-t S pa\rt oi tk i^e. 
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^content { 

float : left; 
width : 500px; 
margin : 0 0 lOpx 0; 
padding : 1Opx; 

} 

#sidebar { 

float : right; 
margin : 20px 0 20px 0 
padding : 1Opx; 
width : 240px; 
border-top : 5px solid 
background: #eee; 


^CoY\itr\i av\A #s*idcbav *tKc*iv ovm 
wid-ths, av\d art -floated *to oi\\tr 
side o-f 七 he lOy% faddm^ ^Wcs 

dor>*tcy>*t or dolumy> 3 Irttle 

bvca'tKmg V*oom. 


#ddd 




#sidebar h2 { 

font-weight : bold; 

text-transform: uppercase; 
padding : 0 5px 5px 5px; 

} 

#port li { 

margin : lOpx 35px 0 35px; 

} 

#port li img { 

border : 5px solid #ddd; 


丁 hese -Pma! adjustmch-ts make -the 
sidebam ali^h av\d the ovcv-all look of 
么 ， "tk pov-t-Polio ma-tdh the desi^h 乙 omp. 
hdh image how has a bov^dev- 


The -fmal sCrtw\\oi 


1 _ , _ 

M kMnM D<pq||^ 


卜 - lMJbi^V2 __J 

Hed L^nteirn Design 


4m 4 hmhi 


U* Irtarf km- fir 



Welcome to Ihi New Red Lunt 


cm Dc4rgn 


FI ■: Larnwr, ■ ■ Mar wa v^itvhi^v few 
w^ii 3 i-iiip 4 ■ , _奶 你 ffikfi 


Wjpu^ |m mmwp ■ >rtemnpd r ■#! iu. pteviHi- iAk." c 

•perttaia .E# -tMmq ~ ini bvnl^ i VEonen.i lh ach fOj pepo 

_ ^ iMWpiV 释 >li| nu^l« iPPkT »«#*■■■ 坤 》 

tan •-坤 iinttg » 


V-pg m 

llwritAfi r. 
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adding page effects 




LcjLEjL± 


Red Lantern Design 


L,in£cra Ddi^i 



hfc?mq CtMdad 





Welcome to the New Red Lantern Design 

HfkI L iirAnrn s a srrnll viw*i cbinign nrvi cmn^uTlinig nrm mnnan i?Jig in 
turdB/dsbHMd _bu«^gin and B4nM^pm4riL Dw gcai * ta bum sirr-pifi, 

Ewi^iiyiil WAhpD^nifl IKdI 巾也味 mbretioAidn >nAi^y And And ^nur 

linppy. 


QUR WORK 


ll ynu Dryniiir cnrrpnn^ 1 n HTlrir^mj n w«nrK -ng wilh un, pkir 
podlaliQ d 4 Mstin- and tvuidna wan an/^^tus 

Wn kxik I 口 rwi/d Id hamrmgi Iran ^ru 
4 ttk?i#np*e^ and ease/ 


. : ii .； 


ilBrig. 


Bunp&r^ai 

CwU «1 Heir 


Ok, now that we have the stylesheet thing 
taken care of y I have another gripe ： I want the 
portfolio to be a little more interactive. Right 
now, you just click the picture and it takes you 
to the site. Can we make this more fun and keep 
users on our site? I want some 、、 wow 〃 factor! 
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Sharpen your pencil 


Take a look at the following ways to make the sidebar portfolio 
more interactive. Match the technique with its list of pros and cons. 



Flash 


Pros: Good mix of interactivity 
and compatibility. 

Cons: Some browsers may have 
this feature disabled or not fully 
support it. 



JQuery JavaScript 
library 


Pros: All code is 
standards-compliant and will 
work in most browsers. 

Cons: Low level of interactivity. 


mz 

XHTML * CSS 


Pros: Limitless interactivity 
and animation. 

Cons: Content not available 
in forms other than visual. 
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which interactivity route? 



Let’s see how the different effects options shape up: 




Flash 


Flash adds mtcva^ivi-ty a-t the expense o( 
hidmg all you\r dohtch-t ih a sih^le SlVp -file. 


fQuer / 

^ Mrta Im, moirw. 


JQuery JavaScript 
library 

JavaSdvipi is vc\ry -flexible, and 

when it icarws up y/i-th )<HTML 

and CSS, i-t 匕 an be vcv-y powcv--ful. 


W5 


r 





XHTML ^ CSS 



Alt^ou^ VOU do some %呼 ^ 

CSS, it docs^t ^ec tv^c level mWattWrb/ 
*tV^c oymev" needs. 
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Pros: Good mix 
of interactivity and 
compatibility. 

Cons: Some browsers may 
have this feature disabled or 
not fully support it. 


Pros: All code is standards- 
compliant and will work in 
most browsers. 

Cons: Low level of 
interactivity. 


JavaScript looks 
like a great way to add 
some interactivity to 
the sidebar portfolio. 


Pros: Limitless interactivity 
and animation. 

Cons: Content not available 
in forms other than visual. 

















evolutionary design 


Hold on a second—I have 
to write JavaScript? Thafs 
complicated stuff, and I*m 
not a programmer! 



You don’t need to be a crack programmer to add 
interactivity with JavaScript. 

JavaScript’s a popular part of web design. It’s used for all kinds of 
things from screen effects (like image lightboxes) to UI elements 
(such as sliders or accordion menus). The problem is, JavaScript 
can be intimidating for someone who’s only had experience writing 
XHTML and CSS. 

The solution is JavaScript libraries. These are pre-written 
JavaScript functions and controls that you can put in a directory 
on your server and call from within your markup. The cool 
thing is that you don’t need to know very much JavaScript to 
take advantage of these libraries. They’re also generally very 
lightweight, cross-browser compatible, and standards-compliant. 

There are lots of different JavaScript libraries out there. Some 
of the best include Dojo (www.dojotoolkit.com) ， Script.aculo.us 
(http://script.aculo.us), Moo tools (http:/ / mootools.net), Prototype 
(www.prototypejs.org/), andJQuery (http://jquery.com/). 







bo v-cally dig m-fco 
JavaSdvip-t? Chedk ou 七七 his book ； 
pv-ctiy awesome- 
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add lightbox effects 


Use JavaScript lightboxes to add 
interactivity to your site 

Lightbox has come to mean any effect that takes an image or HTML 
page and displays it in a floating box in the middle of the screen. In 
some libraries, the background of the site fades out to add emphasis 
to the floating box. We’re going to use a library called Facebox. This 
particular type of lightbox mimics the look of the pop-ups found on 
the Facebook social networking site. It’s going to look great with the 
updated Red Lantern design. 

UWa/ics like Fatcbo% art a ycat 
way *to add 七 / and 1^ 吵 1 吵七 

images ^y\A jallc^ics on you\r si 七 e.- 


This looks great. Lefs 
get this working on our 
site as soon as possible. 



you t\\ck a way, a 

lav-yv- topy <^c same *iw>ay »s loaded 

"m tcir\*tcv- *tV^c 


• a 讪心 badkgv-ouhd, scmi-opa^uc 
bo\rde\r (with \rouhdcd dov-hcv-s -fco matdh 
ouv dcsigh), ahd a dlose bu^oh. 
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Add Faccbox to the Red Lawtcrw home page 

Download the Facebox code from the Head First site: 

www.headfirstlabs.com/books/hfwd 

and place the downloaded files in their appropriate directories. 



/rcdlaiiterM 


/stylesheets 



screen new.css 



screen.css 



facebox.css 


/\dd Fadcbo% CSS 

-Pile -to tVic /sbf\ts\\ttb 

Dv-op -the /-Padcb 。乂 

di\rcd-fcov-y m-to ihc /images 
directory. This will rwatdh 
how ihe -files Imked m 七 he 
JavaSdv-ipt 




facebox.js jquery.js 


T\\t W wa'm j s 
W,|| take davc ok tV^c 

{jo do «S Vmk t^ese 
jfilcs ^ ouv- HTML V.ic, 
a^d v/c'' tc ^ooA b> 50. 
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set up facebox 


Edit your index file 


❺ 


Add the CSS file to the header of the index . html file. 


/ The /?cd 

-file. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 


"http : // www. w3 . org/TR/xhtml 1/DTD/xhtml 1-strict • dtd’，> 

<html xmlns= n http: / /www.w3.org/1999/xhtml" xml : lang= M en M lang= n en"> 
<head> 


<title>Red Lantern Design</title> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > 
<link rel= M stylesheet" href= M /css/screen_new.css" type= M text/css" 
media= M screen" / > 


<link rel="stylesheet" href=' 
media= M screen" / > 

</head> 

<body> 


css/facebox.css" type= n text/css 



bo% appears oy\ *tV^c screen lias i*b 
oym do^rols bo% 

appeav-s. Aaa a Imk »r. the 

dotumcni a-fW Red Lantern stylesheet. 



Add the JavaScript links and code to the header of your index . html file. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 


Y°^ ^ced -fco 

add lihks 


"http :// www.w3.org/TR/xhtml1/DTD/xhtml1-strict•dtd"> 

<html xmlns="http: / /www.w3.org/1999/xhtml" xml : lang="en M lang="en n > 
<head> 


<title>Red Lantern Design</title> 

<meta http-equiv= M Content-Type" content="text/html; charset=utf-8" / > 
<link rel="stylesheet" href="/css/screen_new.css" type="text/css M 
="screen" / > 

<link rel="stylesheet" href="/css/facebox.css" type="text/css" 

="screen" / > 

<script src= M javascripts/jquery.j s" type= M text/javascript"></script 〉 

<script src= M javascripts/facebox.j s" type="text/javascript"></script 〉 
<script type="text/javascript n > 

jQuery(document).ready(function($) { 

$('a[rel* = facebox] ') .facebox () 

}) 

</script> 

</head> 

<body> Belov/ the Trnks io the JavaSdvipt -Piles is a small bii o( 

ade 七 ha 七 readies -the Fadcboy. JavaStvipl io ad when 
a Imk Y/i-th the p\ropc\r vcl a-ttvibutc is disked. 



io the hCW 

JavaS 匕 \ript 

-Piles. Put these 
below the 

stylesheet lihks. 


media 


media 



Tk Patcbo% code takes over a^d uses Uked 
files CSS bo …如如 cm paje. 
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ExeRciSe 


O Using this example above as a guide, add the Facebox effect to the rest of the list 
items in the portfolio. Remember to link the thumbnails to their full-size versions and 
provide the proper rel attribute to the link. 


<ul id="port"> 


/\dd Imks *bo fort-folio images 

-to a \aryr yJtrs\o}f\ o( Ac 
same Vile- This lav-yv imay Vill be 
disflaycd *m -the 1吵 七 box. 



aUiribu-tc dcsMkcs the 
^Wiohship o( a | lh k -to the 

tt 州 itWd io 心 1 | 

the Paybox JavaS^Hpi whch a 

paHi 匕 ulav lihk is d\ckcd. 



<li><a title="View Detail" href= M images/markinjapan_large.jpg" rel= "facebox"> 


<img alt= M mark in japan comp" src= M images/markinjapan.jpg" 
<liximg alt="audio 2 go comp" src= M images/a2g. jpg" 
<liximg alt="rpm comp" src= M images/rpm. jpg" / ></li> 

</ul> 


/></a></li> 

/></li> 

Make su\rc you -fully erdose 
■the <irwj> -tags *m 

■the <a> tags. Basically, thmk 

o( -the ir^ajc as i-f i-t v/cv-c 
mside 七 he I’mk tag. 



6 ee| B!t 5 - 

The rel attribute is used to describe the relationship between two resources. In 
the lightbox case, the link relationship is to the lightbox effect. This is purely a 
semantic relationship, but other resources (like JavaScript) can use that attribute 
to treat those links differently then a normal site link. 
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try out the lightbox 



Let’s take a look at what our portfolio markup needs to look like for the lightbox effect 
to work properly: 


<ul id= M port"> 

<li><a title= n View Detail" href= M images/markinjapan_large.jpg" rel= 
<img alt= M mark in japan comp" src= M images/markinjapan.jpg" /></a></li> 

<li><a title= n View Detail" href= M images/a2g_large.jpg" rel="facebox"> 
<img alt="audio 2 go comp’ ， src= M images/a2g. jpg" /></a></li> 

<li><a title= n View Detail" href= M images/rpm_large.jpg" rel="facebox"> 
<img alt= M rpm comp" src= n images/rpm.jpg" / ></a></li> 

</ul> 


facebox"> 



aodumc^ts also be aisplaycd 1 吵七 b。%. 


Eadh Imk r^ccds -to have -the 
'"cl— w -fadcbo^ w atbriburte *Pov ■ 七 he 
C-P-Pcdi "to v/o\rk p\ropc\rly. 1/Vi 七 hou 七 
bi*t o( Code, "the JavaS^v-ip-t 
wouldh -t k^ow -fco e 乂 edurte. 




Tesr DriVq 


Give it a shot. Add all the images and files to your own file structure 
and load up the page in a browser. How does it look? 

Try another browser. Does it work the same way? 
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Dumb Quest? 


9ns 


You mentioned JavaScript might 
not be fully compatible with some 
browsers. What will happen if a user’s 
browser doesn’t support it? 

That’s right. Not all browsers support 
JavaScript. If that happens, since you 
added a link to the larger image, instead 
of displaying in the center of the existing 
page, the browser may still take a shot 
at displaying the linked image in a new 
blank page. Users would need to use their 
browser’s back button to get back, but they 
may still be able to see the larger image. 


So if I can put text in a lightbox too, 
wouldn’t users miss out on that if their 
browser doesn’t support JavaScript? 

It’s the same deal. Different browsers 
handle JavaScript differently, and as you 
can never be sure what level of support your 
users' browsers will have, this is another 
good reason to use JavaScript sparingly. If 
you're going to use it, make sure the content 
that it displays isn’t crucial to your users’ 
understanding of the site and its content. 


Hmm. Would Flash be a better 
option for adding interactivity? 

It depends on what you're trying to 
achieve. If you want rich, animated, multi- 
media sections, Flash is a good bet, but 
here we’re just showing a larger version of 
an image. Of course Flash has its own set 
of limitations (browsers need plugins, not 
all content is 100% accessible, and so on), 
so if you've got a site that’s mostly content- 
based, it's best to stick with HTML and CSS 
for the main presentation and add touches of 
interactivity here and there with JavaScript 
or Flash. 





What do you think? How else could we 
add new content to Red Lantern to keep 
users coming back over and over? 
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fresh content with blogs 


Hmm. The JavaScript stuff 
looks cool, but if s a one¬ 
time thing. How about a blog 
to keep users coming back? 






Keep your content fresh with a blog. 

Blogs have become a powerful tool for creating two-way 
communication with your users. You posting entries, 
and your users have the opportunity to comment on 
your posts and each other’s comments. 

A blog is a relatively easy way to add a constant stream 
of content to your site — which means that your site will 
always look fresh and give users a reason to come back. 

Blogs also give your site a “voice.” Instead of your site 
being somewhat anonymous, you can speak through 
your blog posts and reach out to other people. 



If you’re going to start a 
blog, make absolutely sure 
that you’ve got the time to 
post regularly. 


There’s nothing worse than your 
users coming to your site, only to find that the 
blog hasn’t been updated for 6 months. The 
only way to attract readers is to give them 
something new and interesting to read on a 
fairly regular basis. 
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Adding blog fuwctiowality with WordPress 


Jane agrees. She thinks it would be a great idea for 
the new version of the Red Lantern site to have a 
blog. That way you guys can write design articles, post 
news about Red Lantern, and generally have a better 
avenue of communication with your users. 

Jane’s done some research and wants to use 
WordPress (http://wordpress.org). Why? Well, there 
are a bunch of reasons: 



BULLET POINTS 


■ WordPress is open source-which means 
there are thousands (perhaps even tens of 
thousands) of developers around the world 
contributing their efforts to make it better with 
every version. 


■ WordPress only requires PHP and MySQL 
to run. (Don’t worry, well talk you through it if 
those terms sound a little scary.) 


■ WordPress has an incredibly easy (and 
legendary) 5 minute install process. 


■ WordPress features a very simple templating 
system that lets you change the look of your 
blog with a click of a button. More importantly, 
it’s really easy to develop your own templates 
(called “Themes” in WordPress speak). 
They’re all written using CSS... so if you 
happen to already have a site and want your 
WordPress blog to look just like it, it’s just a 
matter of adapting the existing CSS. 


■ Best of all, WordPress is free! 


TW.s ,s de-fault YubWk” t 一 e sW, P s H 

WbrdPvcss and is dcs-.^cd y/»tV) all o\ the 





I 3BB 
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lWWTI I 
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hn. ■：■ 
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.mm ^^11 aru 呻 ipdi' h. 
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install wordpress 


Add a WordPress blog to the Red Lawterw site 

To get Red Lantern’s blog up and running, you need to download WordPress 
and get it set up on the server. You can download the WordPress files from: 

http : //wordpress.org/download/ 



/rcdlawterw 



Poymload Wov-dPv-css -Pv-om 
Vi*t*tp ： //^^dp\rcss.o\r5 and a 

£,opy m*to mdm site d>v*c^*toV"Y 
Jc Red La\r\*bcv-r\. 




Copy all downloaded 以。 

-fv-om i\\t IA/ovdP\rcss -folded 
■bo *tV^c /bloj -folder. 




Gee| Bits 


WordPress requires a server with PHP and MySQL (an open source relational database) to operate 
properly. If you don’t have access to a server or hosting plan (most web hosts fully support 
WordPress), check out this site and learn how to run WordPress locally on your PC or Mac using 
XAMPP, an installable set of software that gives you a working web server on your desktop. 

http : //www.apachefriends.org/en/xampp.html 
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Complete the WordPress installation and get the Red Lantern blog up and running. 

you II Kavc *to vcr>amc y/f-do^-ri^-samflc phf 
*to -folloVm ^： 

A ^ 

^ Edit and rename the wp-conf ig. php file so that the parameters match 
the ones from your own setup. 


// 




MySQL settings 




define('DB—NAME', 'putyourdbnamehere 
define('DB USER', 


define('DB—PASSWORD 
define('DB HOST', 


localhost') 


define('DB—CHARSET', 'utf8'); 
define('DB COLLATE ','')； 


// The name of the database 
// Your MySQL username 
yourpasswordhere'); // . . . and password 

; // 99% chance you won 1 1 need to change this value 


These -four database av-c heeded 

,,dah build the database table 
that will hold the blog data. 


so 

s 


o Following the installer, get the basic blog up and running on your local 
machine or server. Remember, we want to access WordPress at /blog. 


t - kg Up ； a * i “ 

(^WordPress 

Wnelcome 

uz inf hurcui Im i-i-irf iH|i4BBZia Yzhci put •jm d? lapirii ciw 

nff-a .if 『 ■ 層」 |r^!p.. f. CT^fnBi+lT. i pJTi.BnH IjfA^ ■■"•J Km ■ bfl q|i Iqi 

mm iw^Elrii^c vkI uoMi'hr pvK^id iflbHnlmg m ihn 
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Policy/ Word?rtss 
mstallcv- -to yi tV^c 

Red Lan*tcv-r\ bloj up 

dy\d \rur\r\m 5 . 
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blog tells it like it is 



Biog Expose 』 

This week’s interview: 
Getting to know the Blog 


Head First ： Welcome, Blog, it’s good have you here. 
To start off, I’ve got to ask, what’s with the name? 
Blog? Sounds like the sound a dog makes when it’s 
throwing up! 

Blog ： Really? Is that how this interview is going to 
go? Ok, I’ll bite. The name “Blog” is a shortened 
version of “weblog,” which is a combination of the 
words “web” and “log.” Basically, back in the day 
when blogs first started out, they were just a log of 
what people were doing on the Web (cool sites they’d 
visited, funny photos, yadda, yadda) — hence the 
name weblog (and then blog). 

Head First ： Sorry, maybe that wasn’t the best way 
to phrase the first question. You’ve certainly come a 
long way from those early days haven’t you? 

Blog: You bet! Blogs have become a really powerful 
tool for communicating on the Web. You see blogs 
everywhere — from personal sites to big corporate 
sites. Everyone has jumped on the bandwagon! 

Head First ： Really? That many people have blogs? 

Blog: Yeah, we’re talking millions, and millions, 
and... well, you get the idea. 

Head First ： Wow. That’s a lot of people blogging. 

If there are that many people using blogs out there, it 
must be super duper easy to set them up? 

Blog: Well, yes... and no. 

Head First ： Yes and no? What kind of answer is 
that? 

Blog ： It’s complicated. 

Head First ： Enlighten us, that’s what you’re for, 
right? 


Blog ： The technology behind blogs can be pretty 
complicated. They are dynamic web applications 
that store stuff (posts, comments, etc.) in a database 
on the server and use a server-side language (like 
PHP) to pull stuff out of that database and put 
it on the actual site. The good thing is that blogs 
have become so popular, there are lots of accessible 
solutions for a wide variety of people with a wide 
variety of tech savvy. 

Head First ： Ok, that sounds good—can you talk 
about some of these solutions? 

Blog: Well, blogs generally fall into two categories: 
hosted and installed. Hosted blog systems are 
created, administered, and maintained by a third 
party (usually administered by the user through an 
easy-to-use online interface). Because the service 
lives on the host’s server, you don’t have to deal with 
installation or server configuration yourself. There 
are free hosted blog services (like blogger) and paid 
hosted services (like movable type). 

Head First ： Ok, I get hosted blogs... what about 
installed blogs? 

Blog ： Installed blog systems are basically software 
that you install on your own web server that run the 
blog. They can be more complicated than hosted 
solutions—especially for people who don’t have access 
to a server (or any server experience). The good news 
is that there are a handful of installed blog systems 
out there (namely WordPress) that make it about as 
easy as it can get. 

Head First ： Wow, I never knew that there was so 
much to know about blogs. Thanks for stopping by! 
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Tost Dwve - 

Take a look at what the blog looks like after you complete the WordPress installation. 

This is wha-t v/ill appear a 七七 he /blog/ URL. 


Worth A Thousand Words 


Stanch 


Hey, Hot Shot, I 
hate to rain on your parade, 
but this blog doesn’t look 
very red to me... 




miUffJQOM 

Cj.1ia?nE£ 

- ru 

p Htie Cdix^crr i!U 
■ Errand 終卞吻 |；| 

ir tQiJH 广 p| 

■ ^ I S 

EH og rail* 

»jhitsirwiilkiP 1 

秦 nuqim 

• fiyiE^n: f^rj^n 

警 Tl^rmcij 

i wn Jr*™, nirvt 


MtlJ 




WovdPvcss ms*talls a 'Weld。 你 e” pos-t 
so 七 hd 七 somctKna^ displays oy\ 七 he 
blo^s home pa^C. y° u ^ V-Cmovc *i*t 
v/hcv> you S*tav 七 blc^’m} 


>3\r y/ill 
show Irnks -fco 
pages, av-dhives, 
Imks a^d 

七 he blo^. 




n 
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wordpress themes 


Change the look and feel of your blog 
with themes 


Themes for WordPress allow you to change the design of your site 
by uploading new designs for use in the software. The themes are 
a collection of files in a directory that hold the PHP code, markup, 
style and images of the new design. Once uploaded, you can 
activate a new theme from the WordPress admin panel. 



The lVo\rdP\rcss 
"thcrwc si-tc 


/blog 

This is the ma'rn 
bloj -Poldc\r -tha-t 
holds all -the > 
IA/ovdP\rcss -files 
drtd -folders. 



/wp - content 


pu 七 all 七 Wes 
*m / 七 Wes 

di 矿 、 



/themes 


Ov\Cc you upload -the 七 heme, rt 匕 an be 
ok> "the Design mertu m "the 


Write Manage Design Comments 



Themes Wldgsis Ttieme Editor Header and Color 



6 ee} BifS 


You can build your own themes for WordPress so that they 
better match the rest of your site. Check out this tutorial to 
get you started on building themes: 


http://codex.wordpress.org/Theme_Development 


400 Chapter 10 






























evolutionary design 



The -P\rcsMy-*mstallcd 

l/Vo\rdPv-css bloj 




A des 咖 updaic and sorwC 
tweaking o( images a^d CSS. 
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tools for your toolbox 



Your Web design Toolbox 

You’ve got Chapter 10 under 
your belt, and you’ve added 
some fresh content to your 
home page. 



BULLET POINTS 


■ Your personal site is your best PR 
tool. 


■ It’s important that your site always 
represents your best and most 
progressive work. 

■ Fresh content will send a positive 
message to your users and keep 
them coming back. 

■ A website should evolve (change 
incrementally) instead of changing 
radically all the time. 

■ JQuery is a library of pre-written 
JavaScript functions and controls 
that are put in a directory on your 
server and then called from within 
your markup. 

■ A lightbox is a page effect that 
displays images or other HTML 
content in a floating frame in the 
center of your page’s layout. 


■ A blog provides you with a way to 
keep your content fresh and updated, 
as well as create a direct line of 
conversation with your users. 

■ Hosted blog systems are created, 
administered, and maintained by 
a third party (usually administered 
by the user through an easy to use 
online interface). 

■ Installed blogs are made possible 
by software you install on your web 
server—they require a database of 
some sort (like mySQL) and support 
fora server-side language (like 
PHP). 
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Mind Your Own Business ^ 



I cant even afford a pair of 
pants since my design got ripped 
off by a rival web design firm. 


Business in a web design book? Are you kidding me? 

You’ve mastered pre-production, information architecture, navigation, color, and even 
accessibility. What’s left in your path to web design mastery? Well, you’re going to have to 
tackle the business issues of web design. You don’t need a Harvard MBA, but you better 
know more than just where you deposit your check... or those checks may stop conning. 
Let’s look at establishing good client relationships and understanding your intellectual 
property rights. The result? Increased profits and protection for your hard work. 


this is a new chapter 
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foo bar 


The newest potential client: the Foo Par 


Jane at Red Lantern just got wind of a big potential client: the Foo 
Bar, a popular restaurant that needs an online presence. After all 
the work you did for Jane with Red Lantern, she’d like you to take 
on the work. She’s willing to pay you well and give you a stake in 
her company if you can get the Foo Bar gig. 






TKc Foo Bav 
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the business of web design 


What Foo Par wants in a bid: 



A few succinct ideas for branding and logos that would fit in 
with the Foo Bar’s new online presence. 


- — "i i srew 供 “ 



Spec work refers to doing a lot of work before getting paid. 
In this case, the Foo Bar owner wants a site mockup to look 
at before he commits to your work and Red Lantern design. 
Why do you think Jane doesn’t usually do spec work? 
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quick code for foo bar 


Let's build a quick mockup for the Foo Par 

By now，putting together a mockup should be a piece of cake. Let’s 
look at some XHTML for a simple version of the Foo Bar: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN M 

"http : / / www. w3 . org/TR/xhtml 1/DTD/xhtml 1-strict • dtd’，> 

<html xmlns="http :// www.w3.org/1999 / xhtml" xml : lang="en M lang="en"> 
<head> 

<title>The Foo Bar</title> 

<meta http-equiv="Content-Type" content= M text/html; charset=utf-8" / > 
<link rel="stylesheet" href="stylesheets/screen.css" type= M text/css" 
media="screen" / > 

</head> 

<body> 

<div id= M header"> 

<img alt= M foo bar logo" src="images/foobar_logo.jpg" / > 

</div> 

<div id= M navigation M > 

<ul> 


<li><a class= M active" title="Foo Bar home" href="#">Home</a></li> 

<li><a title= M Foo Bar menu" href="# n >Menu</a></li> 

<li><a title= M Foo Bar history" href= M #">History</a></li> 

<li><a title= M Contact us" href= M #">Contact</a></li> 

</ul> 

</div> 

<div id= M wrap"> 

<hl>Welcome to The Foo Bar. Cold Beer Served Daily.</hl> 

<img alt= M foo bar storefront" src="images/foobar_front.jpg" / > 

<div id="content"> 

<h2>Get to the Foo</h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a felis. 

Sed ac mauris eget eros vestibulum luctus.</p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a felis. 
Sed ac mauris eget eros vestibulum luctus.</p> 

</div> 

<div id="sidebar"> 

<h2>Specials</h2> 

<ul id= M specials"> 

<li>Monday</li> 

<li>Tuesday</li> 

<li>Wednesday</li> 

<li>Thursday</li> 

<li>Friday</li> 

</ul> 

</div> 

<div id="footer"> 


<p>Copyright &copy; The Foo Bar, 
</div> 

</div> 


</body> 

</html> 


all rights reserved.</p> 


<script src=” … I 
js M /> 

<img 

src=’’siteLogo. 1 

png，，/> j 

- / 


index.html 
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#wrap { 


padding : lOpx; 
background : 
text-align : center; 



Play avouhd wi-th di-Pfcvcht 

^ombiha-tiohs of -the coUs -the Foo Bav 

^tKcty y T 3hd W w °^ bcst 


#wrap hi { 

margin : 0; 
padding : lOpx; 
text-align : center; 
background : 

border-bottom : lpx solid 
color : # f f f; 
font-weight : normal; 
font-family : Georgia, serif 



screen.css 


body { 



Create a new stylesheet, screen.css, and add in color and font faces. Use what you’ve learned 
so far to give Foo Bar a nice contemporary look. Make sure you create a logical directory 
structure and link all the files properly in your index.html file, too. 


margin : 0; 
padding : 0; 

background :………………… 
border-top : 10px solid 
font-family : Helvetica, sans-serif, 
color : # f f f; 


^navigation ul { 

padding : 15px; 

} 

^navigation ul li a { 

color : . 

font-weight : bold; 
font-size : large; 
text-decoration : none 


margin : 0; 
color : 


^navigation ul li a.active 
color : # f f f; 


margin : 0 auto; 
width : 800px; 
background :………………… 
border-left : 5px solid 
border-right : 5px solid 


#sidebar h2 { 

background : 
margin : 0 0 lOpx 0; 
padding : 5px; 


#footer p { 

margin : 


0 ; 
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something’s afoot at foo bar 


#wrap { 


#wrap hi { 

margin : 0; 
padding : lOpx; 
text-align : center; 
background : 

border-bottom : lpx solid 
color : # f f f; 
font-weight : normal; 
font-family : Georgia, serif; 



padding : lOpx; 
background : ..魅 
text-align : center; 


body { 


I Exei 

So 


RC 

tv 



Here are the parts of the CSS file that needed our color treatment. Let’s take a look at the final 
code and see what the finished site looks like. 


tioH 


Wc used the lightest bvov/h the 
ba^kg^rouhd ahd a slightly dar\c^ coU -fov 
"top bo\rdcv-. 


margin : 0; 
padding : 0 





. 

10px solid 

#bdba^c ； 


font-family : Helvetica, sans-serif, 
color : # f f f; 


margin : 0; 
color : 


margin : 0 auto; 
width : 800px; 
background : 

border-left : 5px solid 
border-right : 5px solid 井必办 午 ;. 




^navigation ul { 

padding : 15px; 

} 

^navigation ul li a { 
color : 



screen.css 


font-weight : bold; 
font-size : large; 
text-decoration : none 

} 

^navigation ul li a.active { 
color : # f f f; 

} 

#sidebar h2 { 

background : i-dj 

margin : 0 0 lOpx 0; 
padding : 5px; 

} 

^footer p { 

margin : 0; 




Tk #y/vaf <aw> jets darkest kovms 

o^-fev-s d 6cm*bras*t with Y/iirbe 

it%i ar^d I 吵七 



/foobar 


u car) Ao^iyAobA all -f iles *fov 
-tiic Foo Bav- S*l*tc -fvom 七 he Head 
pivs 七 Labs y/cbs'i-tc. 
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TesT DriVq 


Create (or download) index.html ， screen.css, and the Foo Bar images. Fire up 
your browser, and show the Foo Bar owner your layout and color scheme. 



SaHoon *nd j 


m rt 0 

■a [_ 

*vr.- 


4ir- d 
HKV-I 
Wo^-i 




Sorry, Red Lantern. I just 
didn’t like what you came up 
with. I'm going with someone 


else... with a totally different 
look and feel. Sorry! 
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ripped off? 




1 


J Have you seen Foo Bars new 
site? They ve totally ripped off 
the design you came up with! I can’t 
believe this... what do we do? 


Thcw, three months later … 


Welcome to The Foo Bar. Cote) Beer Served Daily. 




Gel lo Ihe Foo 




Zjmm ijrmiiu di2l4CF rit AHt, Doii ■ fckii. 

SrI ar maiirix mpt ifiT^H 'wurHhiiJTrn lorfrii PhLur^h.EE rdlTtm 

oooM3qujLT KfOL Albfumi rfa^rocoi, dir bodbEci KelrjlAque, idil 
liftiilfllii^rilLct dui|,ji] Indj nul'j dL unet Iohl VImuhM. 

ova PI ： f^MOCT^ itlhm umm porw. 4 

i4Dif«d jnit'S ntidife _ muiL Cm we Turpii xkhi mujfe Imtub 
iialMii Phuellyp inn^ nU «pt n^tum Rk^itvvMi! dal k: 

c^du^AljqiiKn j»t«> ic rypoapwidk NuIIa qvj 

piKni ■ oca tLJ^iiun Ikiix ili^.iduiErH prpfi. vifcpp ni«-, Rpiiqv *Hpl 

iDrcm. [h£^i fWTM -daluff. tmpai bk, arnufi idL on^liJ n^, sdutl 
MmW eimtia- Irimlli ohjik 

limaLpmn ikLwrat um ‘ ecwMtetuerc£LDmisfe5.ii 




H-.illidai' 

F^day 




Wtrts y/V>a*t *tV>c Foo Bav dame uf v/i 七 V>. 
Looks kmd o( -familiav*, docsy> ; *t i*t? 


3 _ 冰 1 




410 Chapter 11 




















the business of web design 
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design pirates 




Dai4y L 


The s^i^ls 
^ ih ih c 

c ^Hy ihc 

Seln\c^ 


tvcv> tolovs art 

七 V>e saw … "t^eve 

yi^i evcv> av> 
cWovt "to Aa 呼 


The 灼 avigatu^ 

is y\o lor>^cv* 
ttr^tytA) 扣 dl 

••七 affcavs 
七 V>ai 七 he 
-foy>*ts have 
bccr> adjusted 
sl*i^*tly. 


Here are just a few of the similarities we found between the “two” versions 
of the Foo Bar site. 


They used ouv^ lo^o-tyfc bu 七 v-emoved *thc 
v/ov~ds below 七 he 七 e% 七 . 


c ^ - ( ■- 


^■•ertistar 


-tWmy rnutW 


D 


thereiar 

)umb 


e no o 

Questions 


There’s no way this was an honest 
mistake, is there? 


But this is the Web. Everyone rips 
everyone else off, right? 


Okay, they definitely ripped us off. 
So what do we do? 


That’s a question you’ve got to ask, 
but it’s usually one that’s pretty easy to 
answer. When two sites look this much alike, 
it’s hard to imagine a situation that doesn’t 
involve stealing designs. Even if you had an 
exercise to develop a site that looked like 
the Foo Bar site, you’d probably make more 
changes than shown above. 


Well, it's like Mom said: just because 
your friends are doing it, doesn’t make it 
right. If everyone else jumped off a cliff... 
well, you get the idea. When you worked 
hard on a design, you’re entitled to make 
sure it stays yours. 


Good question... 
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the business of web design 


Welcome to the world of PESIfrN PIRACY 

It’s been said that imitation is the highest form of flattery. But what happens 
when you come across a site that’s clearly lifted your design? The problem is 
that the Web makes copying (and stealing!) really，really easy. Source markup is 
easily viewable (and copyable), images are easily downloaded to a desktop, and 
CSS is quickly copied. 

So what exactly can you do? First, it’s important that you know that if you 
created your site (and your design really is an original work), j;om own the 
copyright. Second, you don’t have to put a copyright notice on the pages in 
your site for them to be copyrighted. So your design is already copyrighted! 





So we own the copyright. Cool. But what does 
that mean? What should we actually do if our 
copyright’s being violated? 



Send a polite email. 

Ask the owner of the offending website to remove your 
copyrighted material, or take down your copyrighted design. 
And as angry as you might be, keep it civil. It’s far more likely 
that the offender will respond to your requests if you are polite. 


Send a follow-up email and copy Google. 

If you don’t get a response, or get an ugly reply, send another mail 
and GG Google at spamreport@google.com. Google is committed 
to responding to clear violations of copyright. In fact, they’re so 
concerned that their responses to infringement may include removing 
or disabling access to the site that’s infringing on your material. 

Consult a copyright lawyer. 

If nothing else works, gets the lawyers involved. At the very least, a 
lawyer can deliver a cease and desist notification on your behalf. If 
you want to, a lawyer can even take your infringement site to court 
and possibly seek damages on your behalf. Just remember, copyright 
lawyers aren’t cheap! 


Yoy/d be suvpirised 
“at ahd email cav\ 
do. 0-p-tch-tir^cs tlic 
individuals that v-ip <^f*f 
designs av-c just 
you’ll hCVC\r The 

l^/cb is a bia v\au, you 




"This should \rcally be tor\i\AtYtA Bs a 
I 把七 ^sort li has ihe potchtial b> 
expensive -fast. 
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—Mail 

piMImIi 1 ETA 

Us -IPS 一 ~ s 

Unauthorized use of copyright 


Red Lantem Design <10dliinlfirn@gmfliLcy 3 m> 


Red Lantern Dd&ign ^red fantem@gmail.eom> 

Repjy-Toi redlaritern@gma 3 l.eom 

To ： The Foo Bair <a^tacJL@lhefaofisr.tom> 


>oss. 


£al r Wov 15, 5.0OS at 2:17 P^M ； 

Be polite -fahd AoyH be a 4 aid h> 

(" Cht，0h lc 9 al ^ 9 ^ you, poi，i 

To wtiom rt may concetn, sM 

It hascomelooyf attenl 圆 that 剛「 est^blishmenUs using our (Red Lantern Oesign) co^yrigh ㈣ malarialwilhoulpar- 
mission We had recency wrillen a b^d for your coin|Mny and it 即 pears thauhe design we subrniHed 1<x 
has en^ up as your homepage. We were not notified Ehal we had won the bud and receded no compen^tion - o t e 
use of that design or for our sefvjces. We are asking you to p 组 e remove ihe fnatetial from yoiir homepage a n<r dis¬ 
continue any furthef use of our copyriglits or risk legal action taken or\ our betialL 


Thank yen,, 

__ a s ml r_ I I 

Red Lantern Q^sign>, LLC 

The Foo Bar <conlact@lhBfoobar.com> 

To：, fedlamem@gmsil .com 
Red Lanlem u 


I was 

expecting this to drag 
out. Tm glad they are 
taking the site down. 


We ars teni 脚 s_ for the mis^nderstarKiing and it's obvioua that site we have posted ^finitely looks ^kmgly 
similar to design you submiWfid. We^e removed tie copyfigtod maEenal araJ are no longer using any de == 
|«KK assoMted wi 出 Ped Lantem. Again, we appologiae far the misun.dar^landhng and tope we aan avori any and 
Kease let us know if there is anything else we can do. 


[quDled iext hidden] 
Shiuierely, 

Fqq Bar M=3 阳 gemen! 


Poo Ba\r obviously y/as^i c^pcdi'mg us io look ai 
•tliei\r srte aruj seeded cajcv- -fco avoid le^al a^tiem. 
Sometimes jus 七 the ilioujlvt o-P legal double is 
chough -fco jci people -to deeply. 


Be clear, explicit, polite, anct 
iormal in any correspondence 
witk possible design pirates. 
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O 



Okay, this totally sucks. I have no desire to 
deal with all this infringement and copyright 
crap. I just want to design websites! 


There’s more than one type of web designer. 

Some folks just want to design sites. Others have visions of starting 
companies and pouring over spreadsheets. Of course, most folks fall 
somewhere in the middle. There are lots of different roles, even just 
in the web design universe. Are you wondering what parts of web 
design you need to worry about? 

Which of these types of web workers do you think you are? 



Front-end designer 


job is rwos-tly ttT/l/IL av\d CSS. 
hi-end dcsijhc\rs av-c pav-i 



ovymzjC c.ov\*bcy>*b 3 灼 d 





Information Architect 


This 
Fv'or) 

pa\rt jv-aphid aviisi, av\d 
build rwudh of a site’s uscv- 'micv-Padc- 






^ er £ _em p esi 


Graphic designer 

A dcsiJ\r\CV" w>3y dcsijirv USCV* 

mtcv4dcs develop arWk, 

ad wov-k closely i\\t 
dcsij^cv" *to iw>plcmcr\*b 3^ m*bcv"-fatc. 


Wsa cxpcHch^c desighev-s wov-k with -the 
whole tcarh io develop a 乙 owistcht, usable 
•mtevW. They may also be *m dhavgc o-f 
\ruhhihj ahd r^ahagmg usability tests. 



I 灼 some la\rjc design siudios, a 
dopyw\riic\r way be used -to 
help build a^d v/\ri-tc 
(oy B pv-ojedt 


A pv-ogv-ami^c\r may 

be v-cspohsiblc -fov- 

Wit” ba 匕 k- 

Chd Code that 

doht\rols -Pcatuv-cs 

3 wcbsi-tc. They 

乙 ould also wv-itc 

Javas^ipt ahd build 
A^AX -Puhd-tiohality. 

J 



Programmer 


Copywriter 


you are here ► 


415 






what kind of web worker are you? 



Answer the questions in the Web Worker Job Poll to see what part of the web design universe 
you fit into. Add your score up at the bottom of the next page and see where you fit. 


What kmd of web worker arc you? 

Circle the number (1 = Not Interested to 5=Very Interested) that represents your 
interest in the given task description. 

❶ I enjoy writing code that supports the content management of sites 
and interacts with databases. 

1 2 3 4 5 

❺ I want to make sure that users caw find their way through a site 
and that the overall design looks great and works properly. 

1 2 3 4 5 

❺ I like working with content and organizing information ow a website. 

1 2 3 4 5 

❹ I really like design, but I want to be able write some code. 

1 2 3 4 5 
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❺ lam good at writing HTML and CSS and enjoy taking designs and 
expressing them in markup and stylesheets. 

1 2 3 4 5 


❻ I enjoy making web pages behave like desktop applications with 
Javascript and AJAX. 

1 2 3 4 5 


O I like learning about user patterns by observing how others interact 
with websites. 

1 2 3 4 5 

❻ I like to think about navigation and what content is most important 
to a particular project. 

1 2 3 4 5 


Use the following key to see where you fit in the web design world: 

If you scored 8 or higher on ❶ and ❺ then you might be a Programmer. 

If you scored 8 or higher on and then you might be a User Experience Designer. 

If you scored 8 or higher on and then you might be a Information Architect. 

If you scored 8 or higher on o and o then you might be a Front-end Designer. 
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ibtys/ness structures 


O 



So, rm a front-end designer. I 
thought so... but what does that 
have to do with dealing with 
copyrights and stuff? 


Choose your job — and your business — based 
on knowing who you are in the web universe. 

If you’re happy being a designer for a web firm, then copyrights 
probably aren’t going to be a problem anytime soon. Then 
again, with all the good work you’re doing for Jane (and your 
own boss!), you might get asked to join the leadership team of a 
company one day. 

Or if you’re really into control and entrepreneurship, you may 
want to start a company yourself. Knowing who you are helps 
you choose the right company and the right people to put 
around you. 

And if you are into starting a company, there are lots of different 
types... just like there was more than one type of web worker: 


W.s is Wsmc ： 

because t 

itWlY ^ stvutWc. AH 

冰 d r»ab\l'i*t'«cs avc by the 




Sole Proprietor/Partnership 



Corporations 



LLCs a\rc a -Paivly hew -type o( business 

ahd theiv- v-ulcs v 扣 y ^ state 

^ A. LLC U LLP) — tk ovme, 

thc «ty 0+ a sole pv-opHcW with the 
pcvsoal Uauc of a Co^aho^. 


h ^o\rpovatioK> is 七 he 你 os 七 dor^plidaicd 
business siv-udiu\rc. The itscl-f 

bedorwes its ovm ⑶七 iiy, av\d sividi rules 
rwus-t be -followed while d 匕 oV"poV"a 七 io 灼 . 

Covpovaiio^s cav\ also be c^cpc^sivc -to s-fcavi, 
如 d a good lawyer is a key 






Limited Liability Companies 
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Take a look at the different business descriptions and write in the blank whether you think they 
are a Sole Proprietorship, an LLC, or a Corporation. 


businesses , u ,hk ^ ^ ^ 如叫七咖 w 

"tnc 匕 ompdhy. 

Jim and a friend own a small design company 
together, which they work at full time. Their 
company supports both of them, and they are 

thinking about bringing on a third designer to . 

help them with projects. 


Joe has a full-time job with a large computer 
company and builds websites in his spare time 
for small local businesses and friends. He 
makes some money here and there but not 
enough to support him full time. 


Green Giant Design employs 4 full-time people 
and has a six-figure annual revenue year 
after year. The owner works as the creative 
director and likes the fact that her company has 
remained small and services local companies. 


Nationalweb is a large design firm with offices 
in Chicago and New York. Most of their 
clients are large multi-nationals, and they 
are even considering opening up a European 
office in London. 
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quoting a new client 



businesses 


Let’s take a look at how these different companies are structured and organized. 



Because iWis is a a mov-c ^a\ 

busies sWW like a, LLC would be best Plus, 
th,s easier -to deal with. 


Jim and a friend own a small design company 
together, which they work at full time. Their 
company supports both of them and they are 
thinking about bringing on a third designer to 
help them with projects. 


LLC 


Joe has a full-time job with a large computer 
company and builds websites in his spare time 
for small local businesses and friends. He 
makes some money here and there but not 
enough to support him full time. 



Sole Proprietor 


Joe docs^t V^avc tonsis 仏 t busmess, a^d build” 

从 bsU “st job. 几"如 

Ke makes cm 如 dcs*.^ ^ Will just sKov/ uf oh his 

^>CV"SO)r\dl lir\£.OW>C 


Green Giant Design employs 4 full-time people 
and has six-figure annual revenue year after 
year. The owner works as the creative director 
and likes the fact that his company has 
remained small and services local companies. 


LLC 



Mhou 吵 Pcsigh dould easily 
ah LLC is all they v-cally ^td 
Hght how. Thc\rc S ho-t a problem with ah 
LLC hi\rmg employees. 


Nationalweb is a large design firm with offices 
in Chicago and New York. Most of their 
clients are large multi-nationals, and they 
are even considering opening up a European 
office in London. 



Corporation 


Katiohalwcb docs business haiiohdlly 
possibly ih-tcv-hatiohally. A 

^ovpovatioh is the srnairtcs-t stv-udtuv-c 
+OV- this * 


bus'mess. 
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Red Lantern operates as an LLC. Were 
really not big enough to incorporate, and LLC's were 
inexpensive to start. Besides, I’d rather spend my 
time looking for new business, not dealing with more 
paperwork. Speaking of new business... 


Red Lawtcrw's got a new prospective client 

Jane’s just received an email from a little San Francisco-based startup called 
Trilobite Labs, who needs a new site ASAP. Trilobite Labs is building a series 
of really cool iPhone apps, and they need a site that really reflects their design 
sensibilities, but don’t have the time (or the expertise) to build it themselves. 
They love Red Lantern’s site aesthetic, and Jane needs you to replicate success 
one more time. 

Here’s what Trilobite’s looking for: 


Client Requirements 


A static website with a front page, an About page, a 
contact page, and three separate product pages. 


Standards-compliant code. Trilobite’s site has to work 
on all sorts of devices, too. 


Some type of screen effect for their product portfolio. 
Trilobite wants to appear cutting edge to represent their 





work on iPhone apps. 

everal different designs to choose from (paper is fine), 
lid an ability to provide design feedback that will get 
incorporated into the final site. 

ow-key usability testing to make sure there aren’t any 
Iroblems before the site goes live. 


of TVilobrte's iPKo^c affs Icis you dhctk Imcs 
•the Affle sio^rc so you dor^i have b> >wa*rt l*mc 
^ iPhone. 


# 
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how much do websites cost 


^Sharpen your pencil 


Time (hours) 


Now that you know what the requirements are for the site, take a 
few minutes and think about how much a site like this would cost 
and roughly how much time it would take you to complete. Write 
down your estimates in the space below. 


Cost (dollars) 


Just guess? There's got to be a better 
approach. Besides, shouldn’t the cost be a 
result of our hourly rate? How should we 
come up with reasonable rate? 


You need to know your hourly rate 
before bidding on any contract work. 

Whether you’re working for yourself, Red Lantern 
Design, or a huge company, you should have an 
idea of what your hourly rate of work is. Then, you 
can figure out the time it will take to complete a 
project and turn that into a real, fair price. 

The worst thing you can do is overbid... or 
underbid. One will leave you out of work, and the 
other out of money! Here’s a really easy way to 
come up with a reasonable hourly rate: 


\4u\r dtswrtd a^hual salary 




Hourly Rate = *60,000 / ((S x 5 x 50) x .60) 


V^ouv-s v/ov-ked m a year (召 
V^ours a day, days a v/cck, 
y/eeks a ycav). TWis is f\rc*t*by 
Conservative i-f youVc Vymj -to 
start 3 busmess, you koy/ … 



O 



about ^>0°/o of you\r "time will 
actually be billable ； so you r>ccd {o 
multiply youv- yearly hours by MO. 


巧 0/hour 


422 


Chapter 11 














the business of web design 



Now think about how much time might go into each part of the web 
design process and write your estimate in the space provided. 


Initial Input Time 

This is the time spent initially meeting with clients and getting 
to know what their needs are and what they expect from you. 


youv houv 
CS*tima*tc m "tK'is £.olumy>. 



Conceptual 丫 iwe/Pre - production 

Pre-production is where you will look at site content, design an 
information architecture, and come up with storyboards. 


Prafts and Pesign Revisions 

This is where you will go through the draft and design revision 
phase, honing in on a final concept for the client’s site. Be sure 
and include time for client feedback! 

Production Time 

This is where you start writing code. HTML, CSS and 
Javascript could all make an appearance at this stage. Final 
designs are delivered. 

Other Costs 

These costs could include travel, supplies, and other time or 
material that should be billed to the client. 


Woah, I have no clue how long any 
of this stuff will take! 

That’s okay... just take your best guess. 
Think about similar projects where you've 
worked on the various stages, and try and 
remember how much time you spent working. 
It's okay to just estimate. 



And I only estimate actual time 
that I’m working, not breaks or anything, 
right? 

Actually, your estimates should include 
the entire project time: that means including 
breaks, trips to get supplies, and anything 
else related to working on this particular 
project. 


What if I’ve got other people on my 

team? 

Good question. In those cases, two 
people working for an hour each is two hours 
of work time. So you’re estimating the total 
“person hours” a project will take, not the 
number of hours in a day or week. 


you are here ► 


423 












good sites take time 


^Sharpen your pencil_ 

、 Solution 

What really goes into designing a website? 

Initial Input Time 

This is the time spent initially meeting with clients and getting 
to know what their needs are and what they expect from you. 

This mdludes about ^ houv-s o-f J 

\Z Kouvs op v-cscavdh, 扣 d a -fev/ (or *tv-avcl. J 

Conceptual 丫 iwe/Pre - production 

Pre-production is where you will look at site content, design an 30 hours 

information architecture, and come up with storyboards. . 

IA dia^rdrns s-tovyboavds dould "the 
betiev pa\rt o( iv/o weeks 仏 Complete. 

Prafts and Pesign Revisions 

This is where you will go through the draft and design revision 40 hours 

phase, honing in on a final concept for the client s site. Be sure 
and include time for client feedback! 

Time m this s-tajc day) va\ry depeWmg on how 
you\r d\tY\i rtacis io 七 he dv-a-Pts you provided- 

Production Time 

This is where you start writing code. HTML, CSS and /L(\ tlOIlKO 

Javascript could all make an appearance at this stage. Final 
designs are delivered. 

This i'lme IS dll pv-odud*t*ior >： mavkup, s*tylc ar>d 

des'i^. Code, todt, dodc- 

Other Costs 

These costs could include travel, supplies, and other time or 10 hours 

material that should be billed to the client. . 

• 七 va -tvavcl 七 ime, subdoy>*tvad*tov fees, a^d 
e^er\ses car\ all uf ihc 七 ime m taic^ovy. 
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Figure out a total bid... 

hourly v-a*tc tabulated 
a -fev/ pajes batk. 

Hourly Rate = 飧 0,000 / ((S x 5 x 50) x .60)= 巧 0/hr 


(140 hours) x (^50.00/hr) 55 令 7000.00 

This pvidC \rCfV-CSCir>*ts dos*t o( d Small -* to 
med'ium-s'izjed v/ebsrte doM by an mdividual 
f^O/V>ouv. 


there ^ are no o 

Dumb Questi9ns 


Do you need all the people 
in the web design universe to 
successfully complete a site? 

No, not really. If you’re a 
freelance web developer, you may 
wear many hats and be able to work 
with your clients throughout the design 
process. If you need to, you can bring 
in a contractor to complete work that 
you can’t do yourself (like back-end 
programming). 

What’s the difference between 
an LLC and LLP? 

The two types of structures are 
essentially the same thing. LLP stands 
for Limited Liability Partnership and 
is just an LLC with more than one 
shareholder or owner. Most of the time, 
you will see professional services like 
accounting and law firms organize as 
LLPs. 


Is $50/hour the average? 
What’s the range of hourly rates you 
can expect to find at design firms? 

$50/hour is actually on the low 
end. Professional hourly rates range 
anywhere from $50-$75/hour all the 
way up to above $200/hour. These 
rates vary depending on location, 
experience, and size of company. 

What happens if I 
underestimate the time it takes to 
complete a project? 

This is common. Most projects 
are quoted on a job estimate and the 
final price can vary up or down from 
the original quote. The most important 
thing you can do is communicate with 
your client and let them know where 
you are in your process and how close 
the final price will be to what you 
originally quoted. 



Is there a resource for finding 
out what other people are charging 
and what services cost in other 
design-related fields? 

Occasionally the American 
Institute of Graphic Artists (AIGA) 
publishes their Pricing and Ethical 
Guidelines for design professionals. 
This includes web design and has 
information on salaries, hourly rates, 
and industry standards for the field. 


P\ridihg 3y\d 
Ethical 与 uidelmes book. 



you are here ► 


425 








project estimating 

厂 ^|harpen your pencil 


Now that you have a better idea of the time and costs of a typical 
web project, let’s use the Red Lantern estimate worksheet to 
generate a quote for the Trilobite Labs project. Check off the 
client requirements as they are covered in the estimate. 


Client Requirements 


A static website with a front page, an About 
page, a contact page, and three separate 
product pages. 

Standards-compliant code. Trilobite’s site has 
to work on all sorts of devices, too. 

Some type of screen effect for their product 
portfolio. Trilobite wants to appear cutting 
edge to represent their work on iPhone apps. 


Several different designs to choose from 
(paper is fine), and an ability to provide 
design feedback that will get incorporated 
into the final site. 

Low-key usability testing to make sure there 
aren’t any problems before the site goes live. 


Red lantern Project Estimation Worksheet (RLPEW) 


Job description: 

Client Name:. 

Project Description: 


Initial Input Time: 

Hours 

Rate 

Total 

Client Meetings: 

… 士 . 

x f7^/h\r 

= jioo.oo 

Background Research: 


X 

— 

Travel: 


X 

— 
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Pre - production Time: 

In-house Meetings: 
Information Architecture: 
Wireframes: 

Theme Concepts: 


Hours 


X 


X 


X 


Prafts and Pesign Revisions: 

Client Meetings: 
Storyboards: 

Storyboard Revisions: 


X 

X 

X 


Production Time: 


XHTML and CSS: 


X 


Rate Total 

c °py tKis sK^t/ 

ihcsc dos ^ The idea 
„ 一心 W bid 

shcei look like. 

/ you ， waht w $ 

hect ^ y°^ ow, bids. The ,ex+ 


Back-end Programming: 
Graphics and Artwork: 
Copywriting: 

Validation and Debugging: 


Miscellaneous Expenses: 

Fonts and Graphics: 
Software: 

General Supplies 


Totals 

Total Project Hours Total Cost 
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project estimating 


Sharpen your pencil 
k Solution 


Now that you have a better idea of the time and costs of a typical 
web project, let’s use the Red Lantern estimate worksheet to 
generate a quote for the Trilobite Labs project. Check off the 
client requirements as they are covered in the estimate. 


Client Requirements 


or 


A static website with a front page, an About 
page, a contact page, and three separate 
product pages. 




Standards-compliant code. Trilobite’s site 
has to work on all sorts of devices, too. 


Some type of screen effect for their product 
portfolio. Trilobite wants to appear cutting 
edge to represent their work on iPhone apps. 




Several different designs to choose from 
(paper is fine), and an ability to provide 
design feedback that will get incorporated 
into the final site. 

Low-key usability testing to make sure there 
aren’t any problems before the site goes live. 


Red lantern Project Estimation Worksheet (RLPEW) 


Job description: 

Client Name: ......(r a .^ s 



Tk job dcs^ip-tioh bv-ic-fly 
outlines what the pirojcdt Chtails. 
|七 s 3Iso d hide \rc-p\rcshc\r i-f you 
woirk oh lots o( pvojcdts. 


Project Description: A 七 ] h . less l.Q. .>/•)! . be . used 3 . 

would like h> sec mul*tiplc dcsij^ .iclcas bc-fo\rc 
a -f mal vcv-sio^. AH todc mus*t validate. 


Initial Input Time: 

Hours 

Rate 

Total 

Client Meetings: 

… 士 . 

x f7^/h\r 

= jioo.oo 

Background Research: 

10 

x f7^/h\r 

= I i^oo.oo 

Travel: 

^ 1 

x hww 

= 作 .00 


zo Kouirs should us 七 Wou# 七 he mitial fhasc o-P *tV>C firojedi This IS 
mostly restart look'm^ al >wKa*t othev domfar>*ics *m youv d’wb Y\t\d 
TK'is is sometimes tailed Competitive analysis. 
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Pre - production Time: 

In-house Meetings: 
Information Architecture: 
Wireframes: 

Theme Concepts: 


Hours 

z. 

……. l«. 

10 

b 


X 


X 


X 


X 


Rate 

… 

jiww 


Total 

…. \VpOOO, 

… jl^ooo 
1^0.00 


Prafts and Pesign Revisions: 

Client Meetings: 
Storyboards: 

Storyboard Revisions: 


..f 7 ?/hv = 

Pirc-pirodu^ioh is ^ save you lots T 

七 ⑽ c ahd 一 d 此 ks dovm lih(! J do he p^opcvly. 



X. 

.(5 


X 


X 


X 


iiw^ 


; !^p ： pp . . 
， : \\V? ： QO. 
^.00 


Production Time: 

XHTML and CSS: 
Back-end Programming: 
Graphics and Artwork: 
Copywriting: 

Validation and Debugging: 


Pva-P*U a^d Pvodud*t*ioir> is y/hcv-c youv dcsi^ v-cally 
starts *to sK'me- This IS y/hcv-c *thc will (\rsi see 

all *tV>a*t time has ^o^c. 



10 

X 

iiww 

= llVyO.00 

0 

X 

jnw^ 

= boo 

10 

X 

iiww 

= 沐 0.00 

z 

X 

iiww 

= f 1^0.00 

午 

X 

iiww 

= jzoo.oo 


Miscellaneous Expenses: 

Fonts and Graphics: 
Software: 

General Supplies 


These expenses a\rc moi billed hourly. Typically -they avc 
billed a 七 dos 七 plus sorwc of markup. 



X 


X 


X 


f 2.00.00 

j〒:00 … 

f 100.00 


Totals 


Build ’，yreai wcbsi-tcT 
"takes tirnc Bv\d rwohey. 



12- 6 ) houv-s 

Total Project Hours 
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web design doesn’t come cheap 


The guys from Trilobite Labs think 
your estimates a bit high. We can’t 
lose another bid... got any ideas? 


Talking back is highly recommended. 

It’s pretty much a foregone conclusion that you’re 
going to have potential clients who’ll look at your 
estimates and immediately start to argue that 
the price tag is too high. If you’re experienced, 
confident in your design skills, and have done a 
good job estimating project costs, it’s part of your 
job to explain to a potential client why the cost 
estimate is what it is. 

It isn’t “against the rules’’ to respond to a client 
with a justification for your bid. Unless you have 
a really solid reason, you shouldn’t let a client 
bully you into lowering your price. This not only 
devalues your skills as a designer, but might put 
you in a position where you’re putting more work 
into a project than you’re actually getting paid 
for—which is a good way to ruin a business, rather 
than run one. 


O 
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Use a proposal letter to deliver a 
detailed quote to a client 

A proposal letter details all your costs to a client. But it can also make 
it clear exactly how you came up with your bid. Sometimes outlining 
individual costs is all a client needs to understand the value you could 
bring to their project. 


Using the template below, outline the project for Trilobite Labs in a proposal letter so they can 
see what we’re doing and where their money is going. 



Wc r\ttA *to ky>o>w 
v/iio 七 his IS -fov 

quoted 


b\rcakdoy/ir> o( 
sevvites av>d tos*ts 
\will hclf 

ur>dcv-s*tair>d v/ha-t >wc 
av-c do*m^. 



A tchtativc schedule 

SO that the dlicht 

khows how loh^ the 
pvojcdt is 


: e. 


TVsc a 代七 & 
wbra^t Ww'S. 

























copyright and licensing 


9^ 

&teftciS€ 


Let’s look at a completed proposal letter for Trilobite Labs: 


To: 


Pate: 

Service: 


T\rilobi*tc Labs 

123 午 /W 

Kovcmbcv- lAt 2.00^ 


A 厶一召 pay v/cbsi*tc usrng valid toAt y/hidh 'mdludes dll m-fo\rw\a*tioir\ 
dcsij^ dcsi^ d^d pay templates. 


Make suve you 
y 七 -the addvess 

v • 吵七 . Tha 七、 

fvc*t*ty imfov*ta 灼七 . 


Cost: 


Schedule; 


d^d P\rc—p\rodud*tioir\. 

Pcsi^ D\ra-f*b. 

P\rodud*tio 灼 . 

. 

TOTAL. 

A", .weeks：. .DdWer. J.A .and. . 

钐 weeks ： Design d\ra-f*b Sr\d revisions 
I 厶 weeks： Pmal delivery 


Ou-tlmc *tv>c scv-v'idc 
dv>d tos*t so *tKc 
£.us*tomCV* ky>ov/s 
cx-adily 山七 -they 
arc 


A schedule will help 

keep you oh task a^d 
9 ,V C you\r ^licht 3y) 
idea o-p y/liCh they 
exped 3 -fihdl 

•finished product. 


TerWS Z^7o is \rc^ui\rcd *to s*ta\rt pv-ojed*^ *thc \rci^amdc\r o-f ^iW\C\) will be 

paid upo^ dclivcv-y. This <^uo*tc is ^ood -fov- ^>0 ddys. 


Sc 七 -tcv-ms so you 
yb paid ov\ 七 iwe, 
a^d wake su\rc 
•b^at *b^c Aeyrt 
si^s i\\t \tiitr *to 
wake I 七 oWidal. 
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the business of web design 


The Trilobitc podcast: a(wothcr) new challenge 


In the midst of waiting for a decision from Trilobite Labs about your bid, you get 
a call for their CEO. Over lunch a couple of days ago, the guys at Trilobite came 
up with another idea that they want to throw into the mix: podcasting. Trilobite 
really wants to start an official company podcast that covers all of the intricacies 
of developing for the iPhone and iPod Touch. It’s up to you to work out how 
podcasting fits into the bid you’ve already put together. 

But there’s a wrinkle: Trilobite’s really worried about protecting their podcast. 
They want people to be able to download the podcast for free (and share it with 
anyone they want). What they don’t want, though, is for some other website to 
take their podcast and re-sell it. It’s up to you to handle this problem, along with 
the rest of their web-related design issues. 




Use Creative Commons to license your work 

Copyright law is complicated. (Remember our issues with the Foo Bar stealing our 
design?) So where does this leave the average artist, producer, writer, developer, 
or musician who wants to communicate how they want their work used by others, 
but doesn’t want to swim in the shark-infested waters of traditional copyright? It 
leaves us with the Creative Commons. 


T\rilobi*tc -fco unload 
pod^as-ts h> 
Apple iiu^CS S*fco\rC- 


The Creative Commons (http://creativecommons.org/) is a non profit 
organization dedicated to expanding the range of creative works available for 
others to build upon legally and to share. They’ve developed a series of simple 
copyright licenses that protect the “base rights” of the creator. These Creative 
Commons Licenses have become an enormous force in the modern world of 
media production. 


(Vca 七 We >/as 

-founded m 2 - 002 - by 

v-cscav-^cv-s MIT, 

ttav-vav-d av'd S-tan-fovd- 




Copyright issues arise more than you might think. Can you 
come up with three things you’ve done in the last 12 months 
you might want to copyright and protect? 
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creative commons 


Creative Commons Licenses 

Attribution (by) 


TKis v/ould 内。 七 be possible 
\MI 七 hoiA 七 Cv-ca*t*ivc Commons (iittf:// 
dVC3"tiVCdommoir>s.oV^/ 3bou*t/li 



This license lets others distribute, remix, tweak, and build upon your work, even 
commercially, as long as they credit you for the original creation. This is the most 
accommodating of licenses offered, in terms of what others can do with your 
works licensed under Attribution. 



Attribution Share Alike (by - sal 

This license lets others remix, tweak, and build upon your work even for 
commercial reasons, as long as they credit you and license their new creations 
under the identical terms. This license is often compared to open source software 
licenses. All new works based on yours will carry the same license, so any 
derivatives will also allow commercial use. 

①⑨ 

Attribution No Perivatives (by - Hd) 

This license allows for redistribution, commercial and non-commercial, as long as 
it is passed along unchanged and in whole, with credit to you. 

①© 

Attribution Non - commercial (by-nc) 

This license lets others remix, tweak, and build upon your work non-commercially, 
and although their new works must also acknowledge you and be non¬ 
commercial, they don’t have to license their derivative works on the same terms. 

①® 

Attribution Now - commercial Share Alike (by - nc-sa) 

This license lets others remix, tweak, and build upon your work non-commercially, 
as long as they credit you and license their new creations under the identical 
terms. Others can download and redistribute your work just like the by-nc-nd 
license, but they can also translate, make remixes, and produce new stories based 
on your work. All new work based on yours will carry the same license, so any 
derivatives will also be non-commercial in nature. 

①® ⑨ 

Attribution Non - commercial No Perivatives (by-nc-nd) 

This license is the most restrictive of our six main licenses, allowing redistribution. 
This license is often called the “free advertising” license because it allows others 
to download your works and share them with others as long as they mention 
you and link back to you, but they can’t change them in any way or use them 
commercially. 

①® © 
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the business of web design 



Based on the requirements below, choose the Creative Commons license that best meets the 
needs of the Trilobite podcast. 



Trilobite wants anyone to be able to download, copy, distribute, and 
broadcast their podcasts. 



Trilobite wants to make sure that they always get credit for the podcast 
when it is copied, distributed, or broadcasted, in any format. 



Trilobite wants to make sure that the podcast isn’t altered, edited, or 
mashed-up in any way, and when it’s distributed or broadcasted, it's done 
so verbatim. No chopping up, please! 


栋 a 七 meets 
Tv'»lob'«*bc ?o 仏 ast 


o Trilobite wants to make sure that if the podcast is distributed or 

broadcasted, it isn’t for commercial reasons (for example, no third party can 
make money by reselling the podcast). 



\ 


①⑨ 


①® 


① 


①® © ①®@①© 
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using the right license 



What license did you choose? Did it meet all four criteria listed below? 



Trilobite wants anyone to be able to download, copy, distribute, and 
broadcast their podcasts. 


Creative Commons 



•IS 

espedtally 

oy\\\y\C v/rth a v/cll- 
七七一 ou 七 



o 

o 



Trilobite wants to make sure that they always get credit for the podcast 
when it is copied, distributed, or broadcasted, in any format. 


Trilobite wants to make sure that the podcast isn’t altered, edited, or 
mashed-up in any way, and when it’s distributed or broadcasted, it's done 
so verbatim. No chopping up, please! 

Trilobite wants to make sure that if the podcast is distributed or 
broadcasted, it isn’t for commercial reasons (for example, no third party can 
make money by reselling the podcast). 

by—hd almost wo\rkcd ； 
bu 七 dllov/s you "to 

^odi-Py the o\rigihal wovk, 
sonr»cthihg TVilob'rtc did 
hot waht happChmg. 




The A*t*tv*ibu*tioy> No 

Derivatives lidcy>sc Will >wo\rk pc\r^cd*tly 
•fov the fodtast \ 

①® 
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the business of web design 


Just got word that we won the bid for the Trilobite 
project. They liked what they saw, and once they 
looked at the breakdown of costs, they realized 
that they were getting real value. They also really 
appreciated you figuring out the licensing. Nice work! 


O 






to: 


Tv'AoV)'tc . . . 

. . 

. . . 

Service ： . 參 :::::::. 




Gost 


p V odvAe ； t^v ； v;:: ： v ： v：*-- : 
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::㈣ ••• 
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Schedule： . 
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your toolbox 



Your Web design Toolbox 

At this point, it’s time to take 
things out into the world. Stop 
reading. Well, read the bullets 
below, and then stop reading. Or maybe 
after you read the appendix... 

...in any case, you’re a web designer! Put 
this book down and go design. Go make 
beautiful, accessible, usable websites. The 
Web could use a lot more of c em. 


% 


BULLET POINTS 


■ 


Any original work (design, code, etc.) is 
copyrighted-regardless of whether you put a 
copyright statement on it or not. 

■ A polite email asking that copyrighted material be 
taken down is an effective strategy for protecting 
your copyrighted work. 

■ Developing and presenting a professional identity 
and capitalizing on that identity is extremely 
important to being a successful web worker. 

■ It’s important to understand all the different roles in 
the development of a website and where you fit in 
within that structure. 


■ 


Sole Proprietors, LLCs, and Corporations are 
business structures that allow varying degrees of 
liability protection and act as framework for how 
you run your business. 


■ Do your homework when bidding on new work. 
Make sure you are charging appropriate rates and 
not shortchanging yourself because of low-ball 
estimates. 

■ The hourly rate of a web designer can be 
anywhere from $50/hr in small markets to over 
$200/hr for large projects at larger firms. 

■ Use a Proposal Letter to outline the terms of a 
project for a client to make sure they understand 
what they are paying for and what they are getting. 

■ Making sure that both you and your client are clear 
about what is expected of one another will save 
you a lot of trouble in the long run. 

■ A Creative Commons License is a way to 
communicate how you want your creative works 
used by others. 


u MLdvs 
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appendix i- leftovers 命 

The Top Ten Things 
本 (we didn^t cover) ♦ 



We’ve really covered a lot of ground in this book. The thing is, 

there are some important topics and tidbits that didn’t quite fit into any of the previous 
chapters. We feel pretty strongly about these and think that if we didn’t at least cover 
them in passing, we’d be doing you a disservice. That is where this chapter comes 
into the picture. Well, it’s not really a chapter; it’s more like an appendix (ok, it is an 
appendix). But it’s an awesome appendix of the top ten best bits that we couldn’t let 
you go without. 


this is an appendix 
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language and culture 


# 1: Cross-cultural ^ iwterwatiowal design 

The Web is a truly global place — and that means your websites have to be too. 
People from every corner of the globe are checking outyour sites. The thing 
is, everyone has a different cultural, linguistic, and ethnic background — all of 
which might impact how they interpret your site’s design. There are some things 
you should keep in mind when you are designing a site for an international 
audience (or an audience whose culture is different from your own). 


Icons have different cultural meanings 

Icons are cool and can convey a lot of information in a little bit of space. But 
what an icon means to you might be completely different from what that icons 
means to someone in another country or culture: 


ou-t o}f\ a website. 


c 


> 





|n mdv>y o*thcv- fav-*b o-f v/ovld, sV>ofpcv-s 
7 bvmg ovm bay *to i\\t stove. So d 

shoffmg ba^ By\A ir>o*t 3 匕 3 亡七 ， rn'i^ivt be a 

move rwC'toifKoV* -foV* out 


Piffercwt languages have different lengths 


If you translate the content of your site into a variety of different languages — a 
process called localization — you’ll find that phrases may take up a lot more 
space than they originally did. Take a look: 

&r^lish 

“Click here for current site news.” 




“Klicken Sie hier fiir gegenwartige Aufstellungsortnachrichten. 




c^r\W\c 

\A Ukvam'ian, d) 


He/lKHHTe 3flecb PJ]9\ B HaCT051L4ee BpeM51 BeCTOHKM MeCTa 


Scv*1di 3^ a 灼 d 


If you originally design your site in English and then go to translate it to 
German, you’re going to find that the phrases take up more space — throwing 
your carefully planned design into chaos. So what can you do? You either need 
to design your site so that an increased number of characters doesn’t really have 
an impact on your layout, or you’ll need to reformat your site after you translate 
the content into the target language. Either way, you can’t ignore language 
lengths if your site is going to be translated. 
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Is that the month or the year? 


Even something as simple as how date and time are displayed can differ from country 
to country. If your site has the date or time formatted incorrectly for that national or 
cultural context, your users might get confused, or even miss an important event or 
deadline. Here are just a few date and time formats you’ll want to think about: 


\y\ S*ta*tcs, day-mo^th-ycav- 

-fovma*t is used ； y/hile 七 he moir>th-day-ycav- 
WZ010 -fovma't is used mos 七 o*thcv pladcs *m 七 he wovld. 


|s 七 his /1/Iay ZOlO or 

A ? r\l ZOlO? 


3:Z9pm 





T.mc delayed a c\ock \s 

^ -fairly s-tandav-d ^ ^ uV， °? c， 


Tinr»c dis^ldyed or\ 3 1 2 - houir t\otk, 
like you’ll f md m 七 he Uhi-tcd States. 


15:Z5pm 


Is that really the flag you want to use? 

It’s fairly common to see flag icons used to indicate language choice. English might 
be represented by the Union Jack, and French represented by the flag of France. The 
problem with this is that nationality (and flags) don’t represent language. There are lots of 
people who don’t live in France who speak French. So some users might feel frustrated 
or even alienated that your site equates their native language with some other country. 
Instead of using flag icons to indicate language choice, simply spell the language out in 
the actual language — English, Francais, Deutsche, etc. 


1/Vha 七 la^juajc docs the £U -flag 
V-CfVCSChi? ^c\rnr»ah, Spanish 

po^rtujucsc, E^lish, Italian, Polish, 
ov- Pnrmish? 





l_| 


South A^“as 11 oW wl 
lan^a^cs - one docs 


V pocs i\st Ca^ad«ay> ^ ^ 
or botV. oH.t»al 


FrcW? T^cyVc bo 仏 
o-f touyrbrY. 


m\cM TViCvc 

a^rc lots <A C 0 ^br\ts m v/ov-ld 
^Kosc oWwal la ， W»s 
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web evolution 


^Z: The future of web markup 


The web is constantly evolving. New markup and style specifications are being 
proposed, developed, and implemented by the World Wide Web Consortium 
(W3C) — all of which will have an impact on how web designers do their thing. 


Most notable are HTML 5 and XHTML 2. 


HTML 5 vs. XHTML Z 


Both HTML5 and XHTML2 are specifications currently being developed by the W3C. This 
often causes confusion, as many people believe that XHTML 1.x was the successor to HTML 
4.01 (and that HTML is effectively dead). So what’s the difference between XHTML 2 and 
HTML 5? XHTML 2 is pretty much the successor of XHTML 1.x — it’s designed to be the Web’s 
general-purpose markup language, with a minimum of default features that are easy to extend 
using CSS and other technologies. The most important goal for the XHTML 2 working group is 
to further separate document content and structure from document presentation. To these ends, 
the XHTML 2 working group has completely removed elements such as basefont, big, font, 
s, strike, tt, u, small, b, i, and hr. The XHTML 2 group has also been less concerned 
with backward compatibility, which has led them to drop some of the syntactic baggage present in 
earlier incarnations of HTML. The result is a cleaner, more concise language... but one that won’t 
work with old HTML (and some XHTML) web pages. 

HTML 5 has taken a radically different approach. Instead of being a markup language for the web 
(as its ancestor HTML 4 was), HTML 5 is all about moving away from document markup and 
creating a language specifically for web applications. So a lot of the HTML 5 specification focuses 
on creating a more robust, full-featured client-side environment for web application development by 
providing a variety of APIs (and elements that work specifically with those APIs). Examples include 
the 2D drawing API, which can be used with the new canvas element, and an API for playing 
video and audio, which can be used with the new video and audio elements. 

Among many of the cool things you can expect in both HTML 5 and XHTML 2 are navigation 
lists. In XHTML 2, navigation lists look something like this: 




<nl> 

<label>Category</labels 
<li href="/">All</li> 

<li href="/news">News</li> 

<li href=" / videos">Videos</li> 
<li href="/images">Images</li> 



<li> elements av( 

•m XHTML Z *.s 


l ,s i title. 


$ld I—I ele 略 UM: de-Pihes the 


Navigatioh lists must sias^i with a 


3VC used *to m3vkuf Imks. Also 
. is i\\t ability *to ertait a hypcv-lmk 


</nl> 
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In HTML 5, navigation lists look a little something like this: 


<nav> 


kr 


\y\ HTML the ^av has be ⑶ m-tv-oduded 

(or the fuvfosc dv-cat'mj navigational lists. 


<hl>Category</hl> 

Rcjulav- list rwavkup (<ul> f 
<li>) av-c used *to t\rca*tc the 
^avi^d'tio^al lis*t 

<liXa href = n /news">News</aX/li> 

<liXa href ="/videos">Videos</aX/li> 

<liXa href = " /images">Images</aX/li> 


<ul> 

<liXa href="/ n >All</aX/li> 



</ul> 

</nav> 



U^-fo\rtu^a-tcly> unlike XttTAILZ ， <^av> is 
ho 七 a list clcrwCh*t) so i*t da 的’七 cM\\A 


<|i> elements *to lo^idally ov-^a^izjC Imks. 


The whole point of navigational lists (especially in XHTML2) is to create 
simple, lightweight navigation markup that can then be styled using CSS. 


When are they coming? 

Neither XHTML 2 nor HTML 5 have been officially released by the W3C 
(though draft specifications and recommendations for both have been 
released). So when will you see official releases? Honestly, there’s no good 
way to know. Because of the open and collaborative nature of developing 
these sorts of specifications, discussion and deliberation by the members of 
the individual working groups will go on until the job is done and everyone 
gets a chance to contribute. In the grand scheme of things, the release of 
the final specifications are not the issue. What is important is when (and 
how fast) browser developers completely adopt the new standards. 

厂饮 a “II \ruhdowh oh the HTML? 

spedi-pid3*tioh, dhcdk ou*t 

http:/ / www.w3.o\rg/htm|/wg/htm|5/. 

C^flo\rc be XWTMLZ 
spcdi-Pidatioh, visii 
http:/ / www.w^.o\rg/TR/xh*tmlZ/ 
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css advances 


The future of CSS 


Just like HTML and XHTML, CSS is marching forward. While XHTML 2 and HTML 
5 are cool from the perspective of web design, CSS 3 (the next version of CSS) is really 
the icing on the cake. One of the most interesting things about CSS 3 is that it will be 
released as a series of modules — instead of one big single release. This means that CSS 
can be updated faster, as modules can come out individually. Modules can be changed 
and updated independent of other modules, too, which means that you don’t have to 
wait for the next “big” revision of CSS to get a particular update of your favorite module. 


While there are lots of cool modules out there, one of the coolest is the multi-column 
module. It offers new CSS properties that let designers specify the number of columns an 
element should have. This not only allows designers to create documents that look more 
print-like, but it changes the process of creating multi-column layouts entirely. 

The multi-column module includes the following new CSS properties: 


■ column-count determines the 
number of columns into which the 
content of the element will flow. 

■ column-width describes the 
width of each column. 


■ column-gap sets the padding 
between columns. 

■ column-rule defines a border 
between columns. 





/ 


<div id= n entry n > 

<p>...</p> 

<p>..</p> 



</div> 


Chcdk ou*t ho\w HTML 七以七 … 


Loiim rMndofermi 

pnp, ecsrvpfciPC'Uir 
m^swvh^ 4 K. VrswTui ■ 

vdVuftivUri. warn 
vwmi tfst. Civn 

sfl rrmQnm an iwIlktiC 
rummir 

mm ^ 

asd mainuKlH 
. lidurv 
tfl imtfbn bkmwM. 

rwqu*, 



fPHJTl4B4«rK 
wru 
eM. 


I rm\ 

uc h na 
ci mgyri 


■vd 



tiMpm n*h, 

pf 以 J4lAj iIT^ 

mn^p^ ■. ad|9Kn1a 被 
imi. 

Qutib^jb jiifjam mmi >«mi 
vdK. run *mjnc m.*■- 
pc. 

iuci^r vsd. . 

ihem 

cril vtMM. Nnlx 
ic^riiu 
I niETTI. 

OrtOTffi. 

ofis nihh. 

vUc vH iW 
rmrKu»i hmlw. 
Nuftk w-icimJLan Alifum 


V>wmn m 

I tfot. hgutaL 
inflirtai# pMKihun 
i^vi cn pw^jipcrt 
nMWidr rd^iiu 
kuwdrw 对 id# 
rm\ rmkifmdm 

wt unj^c^ biniA, 


■uifjr wmf Kjyyv. an 
lupH rdbh., wwMlkvn a 
ImicUdT 1 pfhHrtm 

•rimrTKiiPRk. CiribCui 
•wp. UiLk ive^lh m, 

JJTOK, QmiUlLMM. M^U 
: /iMfjp ^qtivn mlFaii i 
-vcM, f r&r^ 






■■■I pi 

SuipmkpH _ 

•ilcmta 41L KM 

■f'^'ra^in -sii 


#entry { 


column-count : 2 



“ a 
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# 4: designing for mobile devices 


Over the past couple of years, design for mobile devices has become a really big 
deal. Not only are new mobile network infrastructures coming online that allow 
for faster data transfer, but new and far more powerful devices are hitting the 
market and becoming widely available and adopted. 



Devices sudh as ^oo^l^s Andorid — based 
phones ov Afflc iPhone av-c 
the (stt oi the mobile Web- 



If you are designing for mobile devices, there are some things you should think about: 


■ Even though many mobile devices now have a zoom and browse feature, you 
still need to remember that you are designing for a device with a screen that 
is far smaller than you are probably used to. While there is variation, the 
screen real estate of a mobile device usually comes in around 320 x 240. As 
a result, you are going to have to be incredibly frugal when designing your 
layout... there’s just not a lot of screen real estate to work with. 

■ Many carriers still charge customers for the amount of data that’s pushed 
to their phone. This means you need to create pages that have a very light 
footprint. Besides, mobile connectivity is still quite a bit slower than what 
you’re used to on desktops or laptops. The smaller the file size of the page, 
the faster it will download. 

■ Above all else, test your design on as many mobile devices as possible (or the 
target device — which you can identify using audience research). 



、 . .. 
(or -oWe 

i\\t 
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create web apps 


巧 : Pevelopmg web applications 

The web has developed to the point where you can not only create web pages, but you can also 
create web applications — websites that act (in one way or another) like a desktop application. 
These web applications don’t just display information, they actually do something. 

To create a web app, you’ll need to work in a server-side scripting or programming language. 
Options include PHP, Ruby on Rails, Perl, or ASP.NET Each language has its own strengths 
and weaknesses, and with a little research, you’ll find the one that fits your needs. The language 
you choose is determined by the server on which you’ll be hosting your web app. Remember that 
some servers will support one web language but not another. 


Remember, though, just because you may be coding a web app, you’ve still got to use good 
design principles. Here are a few books that can get you started with web apps: 


A Brain-Friendly Guide 


Head First 

PHP ^MySQL 



O REILLY* 


Lynn Beighley & Michael Morrison 
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# 6: Rhythm iw your layout 


Rhythm — the repetition of design elements — is a term often used in print design. But don’t think 
rhythm is just about print design... it’s just as important on the Web. Repetition allows you to 
create consistency, which contributes to the layout’s visual logic. Repeat a common element or 
theme, and your site feels intuitive, more usable, and logical to users. 

Let’s take a look at how repetition can be used: 



All 乂七 has silhouettes, 

\Y\ the Smallcv don't 伙七 

headev-s. Thai ertait a sc^sc 

-flow- \rhy*th» 


tm. 
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as Yidl Move 
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"the same sov-t of s-tv-ud-tuve ； 

⑽ vcpctitioK> dowh the 
Ichg-th the page. 
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better printing with css 


# 7: Text contrast 


Back in Chapter 7, we talked a lot about how to make content more 
scannable. But scannable text isn’t necessarily legible text. Legible text is text 
that’s easy to read because of the colors and contrast, not because it’s easy 
(or hard) to understand. 


There are a lot of things you can do to make your text more legible. 
Most importantlyt, make sure that you have a high contrast between the 
color of your text and the color of your background. If there isn’t much 
contrast between your text color and your background color, users are 
going to find your text hard to read the text. 


However, the potential of the web to deliver full 
scale applications didn’t hit the mainstream till 
Google introduced Gmail, quickly followed by 
Google Maps, web based applications with rich 
user interfaces and PC-equivalent interactivity. The 
collection of technologies used by Google was 
christened AJAX, in a seminal essay by Jesse James 
Garrett of web design firm Adaptive Path. 





驗 3 總 



The bursting of the dot-com bubble in the fall of 
2001 marked a turning point for the web. Many 
people concluded that the web was overhyped, 
when, in fact, bubbles and consequent shakeouts 
appear to be a common feature of all technological 
revolutions. Shakeouts typically mark the point at 
which an ascendant technology is ready to take its 
place at center stage. 



二 

C ,s havd io 
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# 8: Match link names with their destination page 

As we talked about back in Chapter 6, signposting is one of the guiding principles of 
usable and intuitive navigation design. However, there are many other ways to give users 
a clear indication of where they are, where they can go, and a confirmation that they’ve 
arrived at the right place. One simple technique is to make sure you match the name 
of a link with the destination page’s title. That way, users will immediately know they’ve 
arrived where they expected to be when they clicked on the link. 
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better looking blogs 


# 9: Contrast is a fundamental layout device 


Contrast applies to more than just text and background color. Contrast, more 
broadly, is the juxtapositioning of dissimilar graphic elements. Sounds fancy, 
but it’s not that difficult. 

Contrast is commonly used to create emphasis in a layout. The idea is simple: 
the greater the difference between a design element and its surroundings, the 
more that particular element will stand out. In the context of layout, there 
are generally two things that create contrast: color and containers. When you 
put elements on your page in a container (callout, column, window, etc.), they 
stand out from the elements closeby. So when you apply contrasting colors to 
an element and its surroundings, that element will stand out. 

You can use contrast to obviously identify different parts of your layout or 
focus the user’s eye towards a particularly important aspect of your layout. 
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# 10: More tools for design 

There are lots of great online and offline tools that will help you envision, create, and implement your design. 
We’re not talking about visual markup editors like Dreamweaver here. Instead, we’re talking about tools that 
actually help with the process of design. We’ve already talked about Kuler (a great little online app for creating 
color schemes), but there are so many more. Here are a couple of the good ones: 


Pencil is an incredibly powerful little open source app that is designed 
specifically to create storyboards, interface prototypes and design diagrams. 
It comes in two flavors: a Firefox add-on and a desktop app (only Windows 
and Linux — sorry, no Mac version yet). Honestly, Pencil is pretty much 
an image editing application with features (such as built-in GUI stencils) 
geared specifically towards interface design and prototyping. Best of all, it’s 
completely free, http:/ / www.evolus.vn/Pencil 



WriteMaps is a web application for building robust information 
architecture diagrams. On top of this, it allows you to share and 
collaboratively edit your IA diagrams with others. Like Pencil, 
WriteMaps is also free, http:/ / writemaps.com 


Web Developer is a Firefox add-on that puts a host of web development 
and testing tools at your fingertips. With it, you can directly edit the CSS 
of a currently displayed web page, display all of a site’s style sheets by 
media type, outline all block-level elements in a page, automatically resize 
the browser window, and directly edit the markup of a currently displayed 
web page, http:/ / chrispederick.com/work/web-developer/ 
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CSSTidy is an open source desktop application (available for Windows, Linux, and Mac) which parses 
and optimizes CSS. It can easily reduce the size of your CSS by 25%— which is especially good if you are 
obsessed with optimization or are designing for a platform where small file size matters (like a mobile device). 

http:/ / csstidy.sourceforge.net 


Firebug is an open source (and free) Firefox extension, much like Web 
Developer, that puts a wealth of web design, development, and testing 
tools at your fingertips. With it, you can inspect and edit markup and CSS, 
view a page’s various CSS containers (box model), view a page’s response 
time (download time) broken down by file type, debug and execute 
JavaScript on the fly, and inspect JavaScript performance (among many 
other things), http:/ / getfirebug.com/ 
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